/* public/css/auth.css
   Login y recuperación.

   Las curvas de nivel aparecen en TRES lugares y en ninguno más:
     1. sobre la lámina de fotos,
     2. bajo cada campo, como línea de base,
     3. al pie del aviso emergente, consumiéndose.
   Un cuarto uso convierte la pantalla en decorado. */

/* ---------------------------------------------------------------------------
   AJUSTES DE LA FRANJA DEL LOGO
   La franja cruza la pantalla de punta a punta por detrás del logo. Es
   transparente en toda su extensión: densa en el centro para que el logo azul
   se lea sobre las fotos, y cada vez más transparente hacia los costados.
--------------------------------------------------------------------------- */
:root{
  --franja-centro: .90;   /* opacidad detrás del logo. Subila si no se lee */
  --franja-medio:  .52;   /* a mitad de camino hacia los bordes */
  --franja-borde:  0;     /* en las puntas. En 0 se funde con la lámina */
  --franja-alto:   118px; /* alto de la franja */

  /* Tratamiento de la lámina. Las fotos son de baja resolución: el duotono y
     la posterización convierten esa blandura en material de lámina, en vez
     de dejarla a la vista como un defecto. */
  --plato-contraste: 1.22;
  --plato-brillo:    .82;
  --plato-opacidad:  .62;
}

/* ---------------------------------------------------------------------------
   LÁMINA
   Una carta se arma con planchas adyacentes, no con una imagen estirada. Las
   fotos entran como planchas de una banda: ninguna se agranda más allá de su
   resolución, y la banda se adapta sola a 3, 4 o 5 archivos.
--------------------------------------------------------------------------- */
.pantalla{
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 1.75rem 0;
  isolation: isolate;

  /* Recorta solo a lo ancho, por la franja de 100vw. `overflow: hidden`
     recortaba también a lo alto: en un monitor bajo, el pie del formulario
     quedaba cortado y sin forma de llegar. Con `clip` en un solo eje, si el
     contenido no entra la página scrollea. */
  overflow-x: clip;
}

.lamina{
  position: absolute;
  inset: 0;
  z-index: -2;
  display: flex;
  background: var(--lamina-fondo);
}

.plato{
  display: var(--lamina-platos);
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
}
.plato + .plato{ border-left: 1px solid rgba(234, 241, 246, .14) }

.plato img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Duotono: la foto pasa a escala de grises y el azul la tiñe por debajo. */
  filter: grayscale(1) contrast(var(--plato-contraste)) brightness(var(--plato-brillo));
  mix-blend-mode: luminosity;
  opacity: var(--plato-opacidad);
}

/* Velo de papel: baja el contraste general para que el formulario claro
   apoye sin pelearse con la foto. */
.lamina::after{
  content:'';
  position: absolute;
  inset: 0;
  background: var(--lamina-velo);
}

/* Curvas de nivel, uso 1 de 3: sobre la lámina. */
.curvas{
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.curvas path{
  fill: none;
  stroke: var(--ambar);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: var(--curva-opaca);
}
.curvas path:nth-child(odd){ opacity: var(--curva-tenue) }

/* ---------------------------------------------------------------------------
   COLUMNA
   Ancho fijo, centrada por la grilla de .pantalla. El logo y el formulario
   comparten esta medida: por eso el formulario no se corre al cambiar la
   ventana y el logo lo sigue dentro de su franja.
--------------------------------------------------------------------------- */
.columna{
  position: relative;
  width: var(--columna);
}

/* ---------------------------------------------------------------------------
   LOGO Y FRANJA
--------------------------------------------------------------------------- */
.marca{
  position: relative;
  text-align: center;
  padding: 1.1rem 0;
  margin-bottom: 1.1rem;
}

.marca::before{
  content:'';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: var(--franja-alto);
  /* El barrido de entrada anima --franja-escala; sin JS vale 1 y la franja
     está completa desde el principio. */
  transform: translate(-50%, -50%) scaleX(var(--franja-escala, 1));
  transform-origin: center;
  background: linear-gradient(
    90deg,
    rgba(var(--franja-tono), var(--franja-borde))   0%,
    rgba(var(--franja-tono), var(--franja-medio))  26%,
    rgba(var(--franja-tono), var(--franja-centro)) 50%,
    rgba(var(--franja-tono), var(--franja-medio))  74%,
    rgba(var(--franja-tono), var(--franja-borde)) 100%
  );
  pointer-events: none;
}

.marca img{
  position: relative;
  width: min(210px, 52vw);
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   HOJA DEL FORMULARIO
   Sin tarjeta flotante con esquinas de fantasía: una hoja de papel apoyada,
   con la cota de su borde superior en azul.
--------------------------------------------------------------------------- */
.hoja{
  position: relative;
  background: var(--papel-alto);
  border-radius: var(--radio);
  border-top: 2px solid var(--azul);
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: var(--sombra);
}

h1{
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -.012em;
  margin: 0 0 .15rem;
  color: var(--azul-hondo);
  text-wrap: balance;
}

.bajada{
  font-family: var(--tipo-rotulo);
  font-size: var(--t-sm);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 1.35rem;
}

/* ---------------------------------------------------------------------------
   CAMPOS
   Sin caja, ni en reposo ni al enfocar. Rótulo arriba y línea de base, como
   una etiqueta de mapa apoyada en su cota. Curvas de nivel, uso 2 de 3: al
   enfocar, la línea engrosa y pasa a ámbar.
--------------------------------------------------------------------------- */
.campo{ margin-bottom: 1.15rem }

label{
  display: block;
  font-family: var(--tipo-rotulo);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-bottom: .25rem;
  transition: color .18s ease;
}

input{
  width: 100%;
  font: inherit;
  font-size: var(--t-md);
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-bottom: var(--trazo) solid var(--linea-campo);
  border-radius: 0;
  padding: .4rem 0 .45rem;
  transition: border-color .18s ease, border-width .18s ease;
}
input::placeholder{ color: var(--tinta-suave); opacity: 1 }

input:hover{ border-bottom-color: var(--azul-claro) }

/* El foco lo marca la cota, no una caja. Se anula el anillo heredado y la
   línea se encarga sola. */
input:focus,
input:focus-visible{
  outline: none;
  box-shadow: none;
  border-bottom-color: var(--ambar-hondo);
  border-bottom-width: 3px;
  padding-bottom: calc(.45rem - 1.5px);
}

/* Con teclado, además de la cota ámbar se enciende el rótulo: dos señales
   para quien no ve dónde hizo clic, y ninguna es una caja. */
.campo:has(input:focus-visible) label{ color: var(--ambar-hondo) }

input:autofill, input:-webkit-autofill{
  -webkit-text-fill-color: var(--tinta);
  box-shadow: 0 0 0 100px var(--papel-alto) inset;
}

/* ---------------------------------------------------------------------------
   BOTÓN
--------------------------------------------------------------------------- */
button{
  width: 100%;
  font-family: var(--tipo-rotulo);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sobre-azul);
  background: var(--azul);
  border: 0;
  border-radius: var(--radio);
  padding: .78rem 1rem;
  margin-top: .15rem;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease;
}
button:hover:not(:disabled){ background: var(--azul-claro) }
button:active:not(:disabled){ transform: translateY(1px) }
button:disabled{ background: var(--tinta-suave); cursor: progress }

.secundario{
  margin: 1.1rem 0 0;
  text-align: center;
  font-size: var(--t-sm);
}

/* ---------------------------------------------------------------------------
   AVISO EMERGENTE
   Aparece a la altura del botón principal y lo cubre, de borde a borde de la
   hoja. Ahí es donde está mirando quien acaba de apretar, y no tapa ni el
   título ni el logo. Dura poco y se va solo, sin botón.

   `top` y `min-height` los fija aviso.js midiendo el botón: la posición no se
   puede calcular en CSS sin atarla a la altura exacta del formulario, que
   cambia entre las dos pantallas y entre los dos pasos de la recuperación.

   Curvas de nivel, uso 3 de 3: la cota del pie se consume como tiempo.
--------------------------------------------------------------------------- */
.aviso{
  position: absolute;
  top: 0;              /* lo reemplaza aviso.js */
  left: 0;
  right: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  padding: .7rem 1rem .8rem;
  border-radius: var(--radio);
  font-size: var(--t-sm);
  box-shadow: 0 10px 26px -14px rgba(16, 34, 47, .55);
  overflow: hidden;
}
.aviso[hidden]{ display: none }
.aviso.error{ background: var(--error-fondo); color: var(--error) }
.aviso.ok   { background: var(--ok-fondo);    color: var(--ok) }

.aviso::after{
  content:'';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--ambar-hondo);
  transform-origin: left center;
  animation: consumir var(--aviso-dura, 5s) linear forwards;
}
@media (prefers-reduced-motion: reduce){
  .aviso::after{ animation: none; transform: scaleX(1) }
}
@keyframes consumir{
  from{ transform: scaleX(1) }
  to  { transform: scaleX(0) }
}

.oculto{ display: none }

/* ---------------------------------------------------------------------------
   MÓVIL
--------------------------------------------------------------------------- */
@media (max-width: 560px){
  :root{ --franja-alto: 96px }
  .hoja{ padding: 1.4rem 1.2rem 1.2rem }
  /* Con la pantalla angosta, dos planchas ya llenan la banda; una tercera
     quedaría en una tira ilegible. */
  .plato:nth-child(n+3){ display: none }
}

/* Monitores bajos: se aprieta el aire vertical antes que recortar nada. */
@media (max-height: 760px){
  .pantalla{ padding: 1rem 0 }
  :root{ --franja-alto: 96px }
  .marca{ padding: .8rem 0; margin-bottom: .8rem }
  .marca img{ width: min(180px, 46vw) }
  .campo{ margin-bottom: .9rem }
  .bajada{ margin-bottom: 1rem }
}