/* Pantalla de acceso.

   Partida a toda altura: el lienzo a la izquierda —la pila de hojas y el
   lema— y el formulario a la derecha, a sangre. Sin cabecera ni pie (el logo,
   el idioma y lo legal van dentro), para que el alta, que es lo más alto que
   hay aquí, quepa sin scroll en un portátil. */

:root { --lienzo-acceso: #000103; }   /* el negro de la imagen, igual en los dos temas */

.acceso {
  flex: 1;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(440px, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

/* --- El lienzo --------------------------------------------------------------
   Oscuro en los dos temas, como la escena del pago: es una imagen, y el lema
   va encima de ella. Por eso los colores se fijan aquí y no siguen a los
   tokens, que en el tema claro son tinta oscura. */

.lienzo {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 4.4vh, 44px) clamp(32px, 4vw, 64px) clamp(52px, 8vh, 76px);
  background: var(--lienzo-acceso);
  color: #F5F4F1;
}

.lienzo-arte,
.lienzo-arte img,
.lienzo-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 30%;
}

/* El vídeo entra sobre la imagen cuando ya se está moviendo: su primer
   fotograma es esa misma imagen, así que no se nota el relevo. */
.lienzo-video { opacity: 0; transition: opacity 500ms ease; }
.lienzo-video.is-visible { opacity: 1; }

/* El lema se lee sobre la parte que el arte deja a oscuras. */
.lienzo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--lienzo-acceso) 2%, rgb(0 1 3 / .72) 34%, transparent 62%),
    linear-gradient(to left, transparent 72%, rgb(0 1 3 / .5));
}

.lienzo-marca,
.lienzo-lema { position: relative; z-index: 1; }

.lienzo-marca { align-self: flex-start; display: block; }
.lienzo-marca img { display: block; width: auto; height: 30px; }

.lienzo-lema { max-width: 30rem; margin-top: auto; }

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

.lienzo-titular {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(32px, 5.4vh, 50px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* Lo legal que iba en el pie, en la franja de abajo del lienzo: en el alta no
   se come altura del formulario. */
.acceso-pie {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0 clamp(32px, 4vw, 64px) clamp(16px, 2.6vh, 24px);
  font-size: 12px;
  color: #888E9A;
}
.acceso-pie a { color: inherit; text-underline-offset: 3px; }
.acceso-pie a:hover { color: #E6E4DF; }
.acceso-pie :focus-visible { outline-color: #FFFFFF; }

/* --- El panel del formulario ------------------------------------------------ */

.panel-acceso {
  grid-area: 1 / 2;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
  background: var(--superficie);
  border-left: 1px solid var(--borde);
}

/* El filo de la casa, el mismo que llevan las tarjetas del repositorio: se
   mide con los tokens para que no se descuadre respecto de ellas. */
.panel-acceso::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)
  );
}

.panel-acceso > .idioma { position: absolute; top: 18px; right: 24px; z-index: 1; }

.tarjeta-cuerpo {
  width: 100%;
  max-width: 404px;
  margin: auto;
  padding: 64px 28px 28px;
}

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

.tarjeta-entrada {
  margin: 6px 0 20px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--texto-suave);
  text-wrap: pretty;
}

/* Un enlace en mitad de la frase (el correo al que se mandó el código) se
   distingue por algo más que el color, que apenas se separa del gris. */
.tarjeta-entrada a { text-decoration: underline; text-underline-offset: 3px; }

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

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

/* 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: 46px;
  margin-top: 4px;
  padding: 0 20px;
  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: 15.5px;
  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 otras pantallas ------------------------------------------ */

/* Sin sesión la ventana es la pantalla: el que hace scroll, si hiciera falta
   (el captcha, la ayuda y varios errores a la vez en un portátil), es el panel,
   y el lienzo no se mueve. Con sesión hay cabecera y pie, y la página fluye. */
@media (min-width: 901px) {
  body.pagina-acceso { height: 100vh; height: 100dvh; overflow: hidden; }
}

/* La ayuda de la contraseña sale al llegar al campo y ya no se va (is-tocado, en
   acceso.js). Su sitio está apartado desde el principio (abajo): aparecer no
   mueve nada, ni el botón bajo el ratón entre pulsar y soltar. */
.field--password:not(.is-tocado):not(:focus-within) .field__hint { visibility: hidden; }

/* --- Los errores no mueven nada ---------------------------------------------
   El panel va centrado en la ventana, así que un renglón de más desplazaría el
   formulario entero. El sitio de cada mensaje está apartado desde el principio
   y el texto cae dentro: un renglón bajo cada campo (el hueco entre campos se
   convierte en ese renglón) y dos antes del botón para el aviso de todo el
   formulario. El aviso sigue siendo el primero en el HTML; `order` lo baja. Si
   un mensaje da para más, se sale por encima de lo que venga después: tapa un
   rótulo mientras esté, pero no empuja. Bajo la contraseña nueva, que tiene
   ayuda y los errores más largos, son dos renglones que comparten las dos, y
   de sus errores se ve el primero: al corregirlo sale el siguiente. */
.form[data-acceso] {
  --renglon-error: 18px;
  --aviso-formulario: 36px;
  gap: 3px;
}
.form[data-acceso] > .field:not(.field--codigo, .field--turnstile) {
  --hueco-mensaje: var(--renglon-error);
  position: relative;
  padding-bottom: var(--hueco-mensaje);
}
.form[data-acceso] > .field--password:has(> .field__hint) {
  --hueco-mensaje: calc(var(--renglon-error) * 2);
}
.form[data-acceso] > .field > .field__error,
.form[data-acceso] > .field > .field__repetir,
.form[data-acceso] > .field--password > .field__hint {
  position: absolute;
  top: calc(100% - var(--hueco-mensaje));
  inset-inline: 0;
}
.form[data-acceso] > .field > .field__error { z-index: 1; background: var(--superficie); }
.form[data-acceso] > .field > .field__error > span:not(:first-child) { display: none; }
.form[data-acceso] > .field--password.is-invalid > .field__hint { visibility: hidden; }
.form[data-acceso] > .field--turnstile { margin-top: -3px; }

.form[data-acceso] > .check { margin-bottom: var(--renglon-error); }
.form[data-acceso] > .check:has(+ .field__error) { margin-bottom: -3px; }
.form[data-acceso] > .check + .field__error { height: var(--renglon-error); }

.form[data-acceso] > .form__alert {
  order: 1;
  height: var(--aviso-formulario);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
}
.form[data-acceso] > .form__acciones--acceso { order: 2; margin-top: calc(var(--aviso-formulario) + 3px); }
.form[data-acceso]:has(> .form__alert) > .form__acciones--acceso,
.form[data-acceso]:has(> .field--codigo) > .form__acciones--acceso { margin-top: 0; }

/* Un portátil con la ventana baja: el alta, con la repetición de la contraseña
   y el captcha a la vista, tiene que caber sin scroll. Se aprieta el panel, no
   los campos, que siguen midiendo lo mismo que en el resto de la aplicación. */
@media (min-width: 901px) and (max-height: 800px) {
  .tarjeta-cuerpo { padding-top: 32px; padding-bottom: 16px; }
  .tarjeta-titulo { font-size: 26px; }
  .tarjeta-entrada { margin-bottom: 14px; }
  .form { gap: 10px; }
  .acceso-enlaces { margin-top: 12px; }
}
@media (min-width: 901px) and (max-height: 660px) {
  .tarjeta-cuerpo { padding-top: 10px; padding-bottom: 8px; }
  .tarjeta-titulo { font-size: 23px; }
  .tarjeta-entrada { margin-bottom: 8px; }
  .acceso-enlaces { margin-top: 8px; }
}

@media (max-width: 900px) {
  .acceso { display: block; background: var(--superficie); }
  .lienzo { height: 150px; padding: 18px 24px; }
  .lienzo-lema { display: none; }
  .panel-acceso { border-left: 0; overflow-y: visible; }
  .tarjeta-cuerpo { max-width: 460px; padding: 64px 24px 32px; }
  .acceso-pie {
    justify-content: center;
    padding: 0 24px 24px;
    background: var(--superficie);
    color: var(--texto-tenue);
  }
  .acceso-pie a:hover { color: var(--texto); }
}

/* 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 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), el
   lienzo y el panel se quedan donde están y solo cambia lo de dentro. El tipo
   `familia` lo pone static/js/transiciones.js solo cuando las dos pantallas
   son de la lista. */
html:active-view-transition-type(familia) .lienzo { view-transition-name: acceso-lienzo; }
html:active-view-transition-type(familia) .tarjeta-cuerpo { view-transition-name: acceso-cuerpo; }

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

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