/* =====================================================================
 * acceso.css — rediseño visual de /acceso. SOLO de /acceso.
 *
 * Se carga DESPUÉS de app.css y TODAS sus reglas cuelgan de .acceso-v2,
 * que solo lleva public/acceso.html. Ninguna regla de este fichero puede
 * alcanzar /codigo, /fin, /ver ni /admin, que siguen dependiendo de
 * app.css sin modificar (en particular la lógica de [data-motivo] de
 * /fin, que vive en app.css:98-105 y aquí no se toca).
 *
 * ### DOS INVARIANTES QUE NO SE PUEDEN ROMPER ###
 *
 * 1. NUNCA declarar `display` sobre #mensaje ni sobre .mensaje. El
 *    elemento se oculta y se muestra con el atributo `hidden` desde
 *    acceso.js:37, y eso funciona porque lo aplica la hoja del navegador
 *    (`[hidden] { display: none }`). Cualquier `display` en una regla de
 *    autor gana a esa y el mensaje quedaría visible para siempre.
 *
 * 2. #form, #email, #enviar conservan etiqueta y atributos. acceso.js
 *    los busca por id (acceso.js:9-12) y no lee ninguna clase: aquí solo
 *    se cambia su aspecto.
 *
 * Sin estilos inline, sin CDN, sin webfonts: la CSP (src/lib/responses.ts:26-40)
 * prohíbe `style-src` que no sea 'self' y no admite 'unsafe-inline'.
 * ===================================================================== */

.acceso-v2 {
  /* --- Paleta --- */
  --violeta-oscuro: #270A46;
  --violeta-claro: #BA7DEC;
  --violeta-accion: #7C3AED;         /* blanco encima: 5.70:1  AA */
  --violeta-accion-hover: #5B21B6;   /* blanco encima: 8.98:1        */
  --violeta-accion-active: #4C1D95;  /* blanco encima: 10.95:1       */
  --violeta-foco: #1E0836;           /* 18.37:1 s/blanco · 3.22:1 contra el botón */
  --dorado: #E3C16F;                 /* 9.95:1 sobre el violeta sólido */
  --crema: #F5EFE6;
  --gris-aviso: #5F5A66;             /* 6.69:1 sobre la tarjeta blanca */

  --serif: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;

  /* Medidas. El layout NO se capa: solo la tarjeta. */
  --tarjeta-max: 29rem;      /* 464px */
  --panel-pad: clamp(1.75rem, 4vw, 3.5rem);
  --logo-w: clamp(7.5rem, 10vw, 10rem);
  --logo-h: calc(var(--logo-w) / 2.178);  /* ratio real de logo-blanco.png */

  background: var(--violeta-oscuro);
  color: var(--crema);
}

/* =====================================================================
 * Layout. Móvil primero: marca, tarjeta, panel.
 * El orden del DOM ya es el orden de lectura; no hace falta `order`.
 * ===================================================================== */

/* Ya no se construye fondo artístico por CSS: el arte es el flyer, que
 * entra como <img> dentro del panel. Aquí solo queda el campo oscuro
 * sobre el que se apoyan el flyer y la tarjeta.
 *
 * El tono sale de medir el propio flyer: sus esquinas son casi negras
 * (#010206 la superior derecha, #010208 la inferior derecha), no
 * violeta saturado. Un fondo en --violeta-oscuro puro dejaría una
 * costura visible contra ese borde, así que el campo se oscurece con
 * una capa de negro en alfa —sin introducir ningún color nuevo— hasta
 * quedar a la altura del flyer.
 */
.acceso-v2 .acceso-layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "marca"
    "tarjeta"
    "panel";
  min-height: 100dvh;
  background:
    linear-gradient(rgba(0, 0, 0, .80), rgba(0, 0, 0, .80)),
    var(--violeta-oscuro);
}

/* --- Marca --- */

.acceso-v2 .marca {
  grid-area: marca;
  padding: var(--panel-pad) var(--panel-pad) 0;
}

.acceso-v2 .marca-logo {
  display: block;
  width: var(--logo-w);
  height: auto;
}

/* =====================================================================
 * Tarjeta del formulario
 * ===================================================================== */

.acceso-v2 .acceso-tarjeta {
  grid-area: tarjeta;
  width: 100%;
  /* Los 2rem reservan canalón a ambos lados en pantallas estrechas sin
     perder el centrado por márgenes automáticos. */
  max-width: min(var(--tarjeta-max), calc(100% - 2rem));
  margin: 1.25rem auto 2rem;
  /* Más aire arriba y abajo que a los lados: es lo que da la proporción
     vertical de la tarjeta del mockup, sin tocar el formulario. */
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.25rem);
  background: #fff;
  color: var(--violeta-oscuro);
  border-radius: 1.25rem;
  box-shadow: 0 1.5rem 3rem rgba(15, 3, 28, .35);
}

.acceso-v2 .acceso-tarjeta h1 {
  margin: 0 0 .6rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--violeta-oscuro);
}

.acceso-v2 .acceso-intro {
  margin: 0;
  color: #4A4356;
  font-size: .975rem;
}

/* --- Campo --- */

.acceso-v2 #form {
  margin-top: 1.75rem;
}

.acceso-v2 label {
  display: block;
  margin: 0 0 .45rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #3D2E52;
}

.acceso-v2 #email {
  width: 100%;
  padding: .85rem .9rem;
  border: 1px solid #D8D2E0;
  border-radius: .6rem;
  background: #fff;
  font: inherit;
  color: var(--violeta-oscuro);
}

.acceso-v2 #email::placeholder {
  color: #9A93A6;
}

.acceso-v2 #email:hover {
  border-color: #B9AECB;
}

.acceso-v2 #email:focus-visible {
  outline: 3px solid var(--violeta-foco);
  outline-offset: 2px;
  border-color: var(--violeta-accion);
}

/* --- Botón --- */

.acceso-v2 #enviar {
  display: block;
  width: 100%;
  margin-top: 1.5rem;
  padding: .95rem 1.25rem;
  border: 0;
  border-radius: .6rem;
  background: var(--violeta-accion);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .1em;
  /* El HTML dice "Enviar código": las versalitas son presentación, para
     que un lector de pantalla no deletree el texto en mayúsculas. */
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s ease;
}

.acceso-v2 #enviar:hover:not(:disabled) {
  background: var(--violeta-accion-hover);
  border-color: transparent;
}

.acceso-v2 #enviar:active:not(:disabled) {
  background: var(--violeta-accion-active);
}

/* El anillo va separado del botón por un hueco blanco: así se distingue
   tanto sobre la tarjeta como sobre el propio violeta. */
.acceso-v2 #enviar:focus-visible {
  outline: 3px solid var(--violeta-foco);
  outline-offset: 3px;
}

/* --- Mensaje de estado ---
   OJO: aquí NO se declara `display`. Ver invariante 1 de la cabecera. */
.acceso-v2 .mensaje {
  margin-top: 1.25rem;
  padding: .8rem .9rem;
  border: 1px solid #D9CDEB;
  border-radius: .6rem;
  background: #F6F1FC;
  color: #3D2E52;
  font-size: .925rem;
}

/* --- Aviso de privacidad --- */

.acceso-v2 .aviso-privacidad {
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid #E7E2EE;
  color: var(--gris-aviso);
  font-size: .78rem;
  line-height: 1.5;
}

/* Los dos enlaces del aviso (correo y Política de Privacidad) comparten
 * tratamiento. `:visited` se declara junto al estado base porque si no el
 * violeta de visitado de la hoja del navegador reaparecería aquí, y el
 * subrayado se mantiene porque a .78rem el color no basta para distinguir
 * el enlace del texto gris que lo rodea.
 *
 * --violeta-accion da 5.70:1 sobre el blanco de la tarjeta (AA para texto
 * pequeño); --violeta-claro NO se usa: sobre blanco se queda en 2.90:1. */
.acceso-v2 .aviso-privacidad a,
.acceso-v2 .aviso-privacidad a:visited {
  color: var(--violeta-accion);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.acceso-v2 .aviso-privacidad a:hover {
  color: var(--violeta-accion-hover);
}

.acceso-v2 .aviso-privacidad a:active {
  color: var(--violeta-accion-active);
}

/* Mismo foco que el botón: el violeta casi negro se ve tanto sobre la
   tarjeta blanca como sobre el propio subrayado violeta. */
.acceso-v2 .aviso-privacidad a:focus-visible {
  outline: 3px solid var(--violeta-foco);
  outline-offset: 2px;
  border-radius: .15rem;
}

/* =====================================================================
 * Panel artístico
 * ===================================================================== */

.acceso-v2 .panel {
  grid-area: panel;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Sin fondo propio: lo que se ve es el flyer, y por los lados asoma el
   * campo oscuro del contenedor. En móvil el panel crece con la imagen,
   * así que no se le impone altura. */
  background: transparent;
}

/* El flyer. En móvil es un bloque normal que fluye con la página; en
   escritorio pasa a cubrir el panel (ver el breakpoint). */
.acceso-v2 .panel-flyer {
  display: block;
  width: 100%;
  height: auto;
}

.acceso-v2 .panel-contenido {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: var(--panel-pad);
}

/* --- Pie del panel --- */

.acceso-v2 .panel-pie {
  margin-top: auto;
  padding-top: clamp(1.75rem, 4vh, 3rem);
}

.acceso-v2 .datos {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.15rem;
}

/* Filetes entre datos, no caracteres: si el texto salta de línea, el
   separador no queda huérfano al principio del renglón. */
.acceso-v2 .dato {
  padding-left: 1.15rem;
  border-left: 1px solid rgba(245, 239, 230, .35);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--crema);
}

.acceso-v2 .dato:first-child {
  padding-left: 0;
  border-left: 0;
}

.acceso-v2 .panel-lema {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dorado);
}

.acceso-v2 .panel-copyright {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .04em;
  color: rgba(245, 239, 230, .6);
}

/* =====================================================================
 * Escritorio: dos columnas a sangre. [ panel ] [ tarjeta ]
 *
 * .marca y .panel comparten grid-area: el logo se superpone sobre el
 * fondo del panel sin necesidad de duplicar el <img> en el DOM.
 * ===================================================================== */

@media (min-width: 900px) {
  /* 65/35: el arte manda y la tarjeta acompaña.
   *
   * El campo oscuro se aclara un punto hacia la derecha para que la
   * columna de la tarjeta no sea el mismo negro plano que hace de
   * letterbox del flyer. La transición ocurre entre el 65% y el 76%,
   * es decir YA FUERA del flyer: no lo invade ni lo oscurece, solo
   * evita que la unión se lea como una costura vertical dura.
   *
   * Las opacidades son de negro sobre --violeta-oscuro: .90 compone
   * ~#040107 (a la altura de las esquinas del flyer, #010206) y .70
   * compone ~#0C0315, un violeta muy oscuro para la zona de la tarjeta.
   */
  .acceso-v2 .acceso-layout {
    grid-template-columns: 65fr 35fr;
    grid-template-rows: 1fr;
    grid-template-areas: "panel tarjeta";
    background:
      linear-gradient(
        to right,
        rgba(0, 0, 0, .90) 0,
        rgba(0, 0, 0, .90) 65%,
        rgba(0, 0, 0, .78) 76%,
        rgba(0, 0, 0, .70) 100%
      ),
      var(--violeta-oscuro);
  }

  /* El logo baja al pie del panel: arriba a la izquierda chocaría con el
     «TALLER ONLINE» y el titular que el flyer ya trae impresos. */
  .acceso-v2 .marca {
    grid-area: panel;
    z-index: 3;
    align-self: end;
    justify-self: start;
    padding: var(--panel-pad);
  }

  .acceso-v2 .panel {
    min-height: 100dvh;
  }

  /* El flyer cubre el panel entero. `contain` y no `cover`: ver el
     informe de encuadre — con `cover` se perderían entre el 5.5% y el
     17.8% del ancho, que son los medallones del borde izquierdo y el
     retrato del derecho. */
  .acceso-v2 .panel-flyer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* Barra de datos, lema y copyright: superpuestos abajo, desplazados a
   * la derecha del logo para no pisarlo. El desplazamiento sale del
   * ancho real del logo, no de un número a ojo.
   *
   * El degradado es el único velo que queda, y solo aquí: apenas oscurece
   * el pie de las montañas del flyer para que el texto se lea. */
  .acceso-v2 .panel-contenido {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-left: calc(var(--panel-pad) + var(--logo-w) + 2rem);
    background: linear-gradient(to top, rgba(0, 0, 0, .58), rgba(0, 0, 0, 0));
  }

  /* Centrada en su columna y con aire arriba y abajo, para que el
     violeta respire alrededor de la tarjeta. */
  .acceso-v2 .acceso-tarjeta {
    align-self: center;
    margin: clamp(2rem, 6vh, 4rem) auto;
  }
}

/* Pantallas anchas: solo escala tipográfica y más aire. El layout sigue
   a sangre, sin contenedor centrado, para no perder la inmersión. */
@media (min-width: 1440px) {
  .acceso-v2 {
    --panel-pad: clamp(3.5rem, 4.5vw, 5.5rem);
  }

  .acceso-v2 .acceso-tarjeta {
    padding: 3.5rem 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acceso-v2 #enviar {
    transition: none;
  }
}