/* Pantalla de acceso.

   Dos columnas: la presentación a la izquierda —el nombre en grande y la pila
   de hojas, que es lo que dice de un vistazo de qué va esto— y la tarjeta del
   formulario a la derecha. */

.acceso {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.acceso-rejilla {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px var(--margen-lateral);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 80px;
  align-items: center;
}

/* --- Presentación ---------------------------------------------------------- */

.antetitulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta);
}
.antetitulo-regla { width: 34px; height: 2px; flex-shrink: 0; background: var(--acento); }

.presentacion-titulo {
  margin: 0;
  font-family: var(--display);
  font-size: 92px;
  font-weight: 600;
  line-height: .94;
  letter-spacing: -.04em;
  color: var(--tinta-fuerte);
}

.presentacion-entrada {
  margin: 22px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto-suave);
  text-wrap: pretty;
}

/* --- La pila de hojas -------------------------------------------------------
   Tres hojas abiertas en abanico, la de delante con el filo de los documentos
   —el hilo de tinta con el arranque en ámbar— y unas rayas dentro. No es un
   adorno cualquiera: es lo que Nimbrook fabrica. */

.pila {
  position: relative;
  width: 268px;
  height: 190px;
  margin: 48px 0 0 8px;
}

.pila-hoja {
  position: absolute;
  inset: 0;
  border: 1px solid var(--borde);
  border-radius: 4px;
  background: var(--superficie);
}

/* Las de detrás asoman giradas y sin nada dentro: solo tienen que contar que
   debajo hay más. */
.pila-hoja--fondo {
  transform: rotate(-7deg) translate(-14px, 10px);
  background: var(--fondo);
  opacity: .8;
}
.pila-hoja--medio { transform: rotate(-3.2deg) translate(-6px, 5px); }

.pila-hoja--frente {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 20px;
  overflow: hidden;
  box-shadow: 0 22px 44px -26px rgb(var(--sombra) / .45);
}

.pila-hoja--frente::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--filo);
  background: linear-gradient(
    to right,
    var(--acento) 0 var(--filo-ambar),
    var(--tinta) var(--filo-ambar)
  );
}

.pila-rotulo {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.pila-regla { height: 1px; background: var(--borde-suave); }

.pila-linea { height: 6px; border-radius: 3px; background: var(--borde); }

/* El hueco de la captura, que es lo que de verdad llena un paso del manual. */
.pila-captura {
  flex: 1;
  min-height: 44px;
  margin-top: 4px;
  border: 1px dashed var(--borde);
  border-radius: 4px;
  background: var(--fondo);
}

/* --- Tarjeta de acceso ------------------------------------------------------ */

.tarjeta-acceso {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 6px;
  box-shadow: 0 18px 44px -28px rgb(var(--sombra) / .28);
  overflow: hidden;
}
.tarjeta-estrecha { width: 100%; max-width: 460px; justify-self: end; }

/* El filo de la casa, el mismo que llevan las tarjetas del repositorio y la
   hoja de delante de la pila: se mide con los tokens para que no se descuadre
   ninguno respecto de los otros. */
.tarjeta-filo { display: flex; height: var(--filo); background: var(--tinta); }
.tarjeta-filo::before { content: ""; width: var(--filo-ambar); background: var(--acento); }

.tarjeta-cuerpo { padding: 34px 40px 28px; }

.tarjeta-titulo {
  margin: 0;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -.025em;
  color: var(--tinta-fuerte);
}

.tarjeta-entrada {
  margin: 8px 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-suave);
  text-wrap: pretty;
}

/* --- Formulario ------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 18px; }

/* El botón «Ver» está detrás del campo en el HTML para no robarle el tabulador
   a la contraseña; aquí vuelve a su sitio, en la línea de la etiqueta. */
.field--password { position: relative; }

.field__reveal {
  position: absolute;
  top: -2px;
  right: 0;
  padding: 2px 6px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-tenue);
  cursor: pointer;
  user-select: none;
  transition: background 140ms ease, color 140ms ease;
}
.field__reveal:hover { background: var(--tinta-tenue); color: var(--tinta); }

.field__input--password { letter-spacing: .04em; }

.field__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--superficie) inset;
  -webkit-text-fill-color: var(--texto);
}

/* El botón de entrar: alto, a todo lo ancho y con la barra de progreso por
   detrás del texto. La barra es de Nimbrook —el resto de la familia pone un
   giro— y cuenta lo mismo: que se ha enviado y hay que esperar. */
.boton-entrar {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 54px;
  margin-top: 8px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: none;
  border-radius: var(--radio-control);
  background: var(--tinta);
  color: var(--sobre-tinta);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}
.boton-entrar:hover { background: var(--tinta-fuerte); }
.boton-entrar:active { transform: translateY(1px); }
.boton-entrar[data-busy] { cursor: progress; background: var(--tinta-fuerte); }

.boton-entrar__etiqueta,
.boton-entrar__glifo { position: relative; z-index: 1; }
.boton-entrar__glifo { font-size: 18px; opacity: .75; }

.boton-entrar__progreso {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--acento);
  transition: width 250ms linear;
}

/* --- Adaptación a pantallas menores ----------------------------------------- */

@media (max-width: 1100px) {
  .acceso-rejilla { gap: 56px; }
  .presentacion-titulo { font-size: 76px; }
  .pila { width: 232px; height: 168px; }
}

@media (max-width: 900px) {
  .acceso { align-items: flex-start; }
  .acceso-rejilla {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 48px;
    padding-bottom: 48px;
    max-width: 620px;
  }
  .presentacion-titulo { font-size: 64px; }
  .tarjeta-estrecha { justify-self: stretch; max-width: none; }
  /* La pila ocupa sitio y aquí no cuenta nada que no cuente ya la tarjeta. */
  .pila { display: none; }
}

@media (max-width: 560px) {
  .presentacion-titulo { font-size: 52px; }
  .tarjeta-cuerpo { padding: 30px 26px 24px; }
}

/* Un portátil con la ventana baja: el alta, que es la tarjeta más alta, tiene
   que caber sin que la página haga scroll. Se aprieta la tarjeta, no los
   campos, que siguen midiendo lo mismo que en el resto de la aplicación. */
@media (min-width: 901px) and (max-height: 820px) {
  .acceso-rejilla { padding-top: 20px; padding-bottom: 20px; }
  .tarjeta-cuerpo { padding: 28px 36px 22px; }
  .tarjeta-titulo { font-size: 30px; }
  .tarjeta-entrada { margin-bottom: 18px; }
  .tarjeta-acceso .form { gap: 14px; }
  .acceso-enlaces { margin-top: 16px; }
}

/* Con el dedo, «Ver» es un texto de 20 px de alto: la zona de toque se
   estira con un ::after transparente sin moverlo de la línea de la etiqueta,
   y por abajo se queda corta para no pisar el campo. */
@media (pointer: coarse) {
  .field__reveal::after { content: ""; position: absolute; inset: -14px -10px -4px; }
}

/* --- Lo que añadió allauth ---------------------------------------------------
   El alta, los códigos y la recuperación usan la misma tarjeta que el acceso. */

/* El botón ancho ocupa su propia fila; los secundarios (pedir otro código,
   cancelar) quedan debajo, en línea. */
.form__acciones--acceso { flex-direction: column; align-items: stretch; }
.form__acciones--acceso .form__acciones { flex-direction: row; justify-content: center; }
.form__acciones--acceso .button-ghost { align-self: center; }

.acceso-enlaces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  margin: 22px 0 0;
  font-size: 14px;
  color: var(--texto-suave);
}
.acceso-enlaces a { font-weight: 600; }

/* El hueco del captcha: el widget solo se ve cuando le pide un clic a alguien
   (apps/accounts/turnstile.py); mientras, mide cero y no se le reserva sitio.
   El margen negativo se come el hueco del formulario, para que un campo vacío
   no deje un renglón en blanco antes del botón. */
.field--turnstile { margin-top: -10px; }

/* --- El código del correo, en casillas ---------------------------------------
   Una por carácter, en los mismos grupos que el correo separa con un guion
   (templates/partials/codigo.html). Lo que se escribe va a un único campo
   que está encima, transparente: las casillas solo lo dibujan. Sin
   JavaScript (sin .is-casillas) o con los colores forzados del sistema, que
   volverían visible el texto del campo encima de ellas, queda el campo
   normal. */

.codigo { position: relative; }
.codigo__casillas { display: none; }

@media not (forced-colors: active) {
  .codigo.is-casillas .codigo__casillas {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Encima de todo y del mismo tamaño, para que cualquier toque caiga en él;
     sin letra, cursor ni selección a la vista. La letra, de 16 px: con menos,
     el iPhone acerca la página al enfocarlo. */
  .codigo.is-casillas .codigo__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: transparent;
    caret-color: transparent;
    font-size: 16px;
    cursor: text;
  }
  .codigo.is-casillas .codigo__input:focus { box-shadow: none; }
  .codigo.is-casillas .codigo__input::selection { background: transparent; }
  /* El autorrelleno de Chrome pinta el campo de color y su letra encima de las
     casillas: ni lo uno (no hay manera de quitarle el fondo, se le retrasa
     para siempre) ni lo otro. */
  .codigo.is-casillas .codigo__input:-webkit-autofill {
    -webkit-box-shadow: none;
    -webkit-text-fill-color: transparent;
    transition: background-color 0s 86400s;
  }
}

.codigo__grupo { flex: 1; display: flex; gap: 6px; min-width: 0; }

.codigo__casilla {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid var(--borde);
  border-radius: var(--radio-caja);
  background: var(--superficie-baja);
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  color: var(--tinta-fuerte);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.codigo__casilla.is-llena { border-color: var(--borde-fuerte); background: var(--superficie); }
.codigo__casilla.is-activa {
  border-color: var(--tinta);
  background: var(--superficie);
  box-shadow: 0 0 0 3px var(--anillo);
}

/* El cursor de la casilla vacía que toca escribir: el ámbar de la casa, en
   el único sitio de la pantalla en que se escribe. */
.codigo__casilla.is-cursor::after {
  content: "";
  width: 2px;
  height: 26px;
  border-radius: 1px;
  background: var(--acento);
}

/* El guion entre los grupos, el mismo que lleva el código en el correo. */
.codigo__guion {
  flex: 0 0 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--borde-fuerte);
}

.field--codigo.is-invalid .codigo__casilla { border-color: var(--error-campo); }
.field--codigo.is-invalid .codigo__casilla.is-activa {
  border-color: var(--error-campo-foco);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 14%, transparent);
}

/* El aviso de lo que no se ha dejado escribir o enviar. Vacío no ocupa sitio
   pero sigue ahí, para que el lector de pantalla lo lea en cuanto se llena. */
.codigo__aviso:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

@media (prefers-reduced-motion: no-preference) {
  .codigo__casilla.is-nueva { animation: codigo-entra 160ms var(--transicion-curva); }
  .codigo__casilla.is-cursor::after { animation: codigo-parpadeo 1.1s steps(1) infinite; }
}

@keyframes codigo-entra {
  from { transform: scale(.9); }
}
@keyframes codigo-parpadeo {
  50% { opacity: 0; }
}

@media (max-width: 560px) {
  .codigo.is-casillas .codigo__casillas { gap: 8px; }
  .codigo__grupo { gap: 5px; }
  .codigo__casilla { height: 50px; font-size: 21px; }
  .codigo__guion { flex-basis: 8px; }
}

/* El enlace a «cambiar de correo» de la pantalla del código. */
.tarjeta-cuerpo details { margin-top: 22px; font-size: 14px; }
.tarjeta-cuerpo details > summary { cursor: pointer; font-weight: 600; color: var(--texto-suave); }
.tarjeta-cuerpo details > .form { margin-top: 14px; }

/* --- De una pantalla a otra -------------------------------------------------
   Entre entrar, crear una cuenta y recuperar la contraseña (las rutas de
   data-transicion-familia, en templates/allauth/layouts/entrance.html), la
   tarjeta no se funde con la página: es la misma tarjeta que cambia de alto,
   y lo de dentro se va y llega mientras tanto. La presentación se desliza a
   su sitio nuevo, que se mueve un poco al cambiar el alto de la fila.

   El marco de la tarjeta lo pinta el propio grupo de la transición —fondo,
   borde, filo y sombra—, que es la caja que viaja de un tamaño al otro; las
   dos fotos del marco se esconden, porque estiradas deformarían el filo y
   las esquinas. El cuerpo va aparte y recortado por su caja: al crecer, lo
   nuevo se va descubriendo hacia abajo. El tipo `familia` lo pone
   static/js/transiciones.js solo cuando las dos pantallas son de la lista. */
html:active-view-transition-type(familia) .presentacion { view-transition-name: acceso-presentacion; }
html:active-view-transition-type(familia) .tarjeta-acceso { view-transition-name: acceso-tarjeta; }
html:active-view-transition-type(familia) .tarjeta-cuerpo { view-transition-name: acceso-cuerpo; }

::view-transition-group(acceso-presentacion),
::view-transition-group(acceso-tarjeta),
::view-transition-group(acceso-cuerpo) {
  animation-duration: 380ms;
  animation-timing-function: var(--transicion-curva);
}

::view-transition-old(acceso-presentacion) { display: none; }
::view-transition-new(acceso-presentacion) { animation: none; }

::view-transition-group(acceso-tarjeta) {
  box-sizing: border-box;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background:
    linear-gradient(to right, var(--acento) 0 var(--filo-ambar), var(--tinta) var(--filo-ambar))
      top / 100% var(--filo) no-repeat,
    var(--superficie);
  box-shadow: 0 18px 44px -28px rgb(var(--sombra) / .28);
}
::view-transition-old(acceso-tarjeta),
::view-transition-new(acceso-tarjeta) { display: none; }

::view-transition-group(acceso-cuerpo) { overflow: clip; }
::view-transition-old(acceso-cuerpo) { animation: 120ms linear both transicion-sale; }
::view-transition-new(acceso-cuerpo) { animation: 240ms ease 110ms both transicion-entra; }