/* Login Nodal · /loginnodal
 *
 * La lámina aprobada es `05_LOGIN_NODAL_APROBADO.png` de la V06, y el MD de
 * Gustavo la señala como **la referencia visual de todo el producto**: lo que
 * se decida aquí es lo que después repiten las demás pantallas. Por eso las
 * medidas de abajo salen de medir la lámina, no de estimarlas a ojo.
 *
 * Lo que se midió sobre la lámina (1536 × 1024) y de dónde sale cada número:
 *
 *   la partición ..............  el corte cae en x = 820 → 820 / 716, no mitad y mitad
 *   la marca ..................  arriba, no centrada: NODAL arranca en (89, 144)
 *   el anillo .................  centro (730, 108), radio 225: no toca la marca
 *   los campos ................  60 px de alto, sin relleno, no los 40 del control normal
 *   el botón ..................  67 px de alto y radio 10
 *   la columna del formulario .  534 px, de x = 923 a 1457
 *   el panel ..................  MÁS oscuro que la escena, no más claro
 *   la foto ...................  duotono frío verdoso, no gris puro
 *
 * Remedido el 24/09/2026 con un guion sobre los píxeles de la lámina, después
 * de que Cristian marcara que el anillo pasaba sobre NODAL y que la bajada era
 * distinta. Con esas medidas, cada texto y cada caja cae a 1-3 px de la lámina.
 *
 * El primer intento tenía la estructura bien y el tratamiento mal —mitad y
 * mitad, panel más claro, marca centrada y chica, foto en gris—. Cristian lo
 * señaló comparando con la lámina el 24/09.
 *
 * Aquí no hay ni un color escrito: todo sale de los tokens de
 * `nodal-tokens.css`, así que la pantalla cambia sola con el tema. Y no hay
 * ningún `!important`: esta hoja no compite con nadie, es una vista propia.
 */

.nodal-login-body {
  margin: 0;
  background: var(--nodal-superficie);
  color: var(--nodal-texto);
  font-family: var(--nodal-tipografia, "Arimo", Helvetica, Arial, sans-serif);
}

.nodal-login {
  display: grid;
  /* el corte de la lámina cae en x = 820 de 1536 */
  grid-template-columns: 820fr 716fr;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------------------------------------------------------- la escena */

.nodal-login__escena {
  position: relative;
  display: flex;
  /* arriba, no centrada: en la lámina la marca abre la pantalla */
  align-items: flex-start;
  /* la marca de la lámina arranca en (86, 138) de 1536 × 1024 */
  padding: 13.5vh clamp(2rem, 5vw, 5rem) 3rem clamp(2rem, 5.6vw, 5.4rem);
  overflow: hidden;
}

/* La foto va en un elemento propio y no como fondo del contenedor, para que la
   marca no herede nada de lo que se le haga a la imagen.

   Con su color original, sin filtro y sin velo (Cristian, 24/09/2026 por la
   noche). La escena de concreto ya viene oscura y fría, como la de la lámina;
   el tratamiento de antes —grayscale(1) brightness(0.58) contrast(0.92) más un
   velo verde profundo al 42 %— era para la foto vieja, y sobre esta dejaba
   «un tono verdoso» que no está en la lámina. Si una foto futura viene clara,
   se oscurece la foto, no se vuelve a teñir. */
.nodal-login__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nodal-login__marca {
  position: relative;
  max-width: 26rem;
  /* 408 px de ancho en la lámina */
  width: 62.4%;
  min-width: 14rem;
}

.nodal-login__logo {
  display: block;
  width: 100%;
  height: auto;
  color: var(--nodal-blanco);
}

/* La marca apilada va dentro del HTML (views/partials/nodal-marca-apilada.ejs):
   su tinta es currentColor y su turquesa, el del registro, sale del token. */
.nodal-marca-apilada__acento {
  fill: var(--nodal-teal-claro);
}

/* El anillo de la lámina: decorativo, se sale del borde a propósito y el punto
   queda sobre el arco, no suelto. Medido ajustando un círculo a sus píxeles:
   centro (730, 108) y radio 225 sobre 1536 × 1024, así que su borde izquierdo
   cae en x = 506 y NUNCA pasa sobre NODAL, que termina en 491. El arco es
   fino y del turquesa oscuro; el punto, del claro. */
.nodal-login__anillo {
  position: absolute;
  top: -11.8%;
  right: -17%;
  /* sin mínimo: con min-width el anillo quedaba grande en una escena angosta
     y a 992 px volvía a pasar sobre NODAL. Escalando con la escena, la
     distancia a la marca es la de la lámina a cualquier ancho. */
  width: 56%;
  pointer-events: none;
}

.nodal-login__anillo-arco {
  stroke: var(--nodal-teal);
}

.nodal-login__anillo-punto {
  fill: var(--nodal-teal-claro);
}

/* ----------------------------------------------------------- el panel */

.nodal-login__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* la columna de la lámina va de x = 923 a 1457: 103 px a la izquierda del
     panel y 79 a la derecha, no centrada. Abajo lleva más relleno que arriba
     porque en la lámina el bloque va unos 20 px por encima del centro. */
  padding: 3rem clamp(1.5rem, 5.1vw, 4.9rem) 5.6rem clamp(1.5rem, 6.7vw, 6.4rem);
  /* la superficie base, que es la más oscura del tema: en la lámina el panel
     es más oscuro que la escena, no más claro */
  background: var(--nodal-superficie);
}

/* En la lámina: globo de 26 px centrado a 62 px del borde de arriba y la
   flecha terminando a 55 px del de la derecha. */
.nodal-login__idioma {
  position: absolute;
  z-index: 2;
  top: 2.8rem;
  right: 3.1rem;
}

.nodal-login__idioma summary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--nodal-texto);
  font-size: 1rem;
  list-style: none;
  cursor: pointer;
}

.nodal-login__idioma summary::-webkit-details-marker {
  display: none;
}

.nodal-login__idioma summary:hover,
.nodal-login__idioma summary:focus-visible {
  color: var(--nodal-acento);
}

.nodal-login__idioma summary:focus-visible {
  outline: none;
  border-radius: var(--nodal-radio);
  box-shadow: 0 0 0 3px var(--nodal-foco);
}

/* el globo de la lámina mide 26 px de trazo: 32 de caja */
.nodal-login__idioma summary svg {
  flex: none;
  width: 32px;
  height: 32px;
}

.nodal-login__idioma summary svg:last-child {
  width: 22px;
  height: 22px;
  transition: transform 120ms ease;
}

.nodal-login__idioma[open] summary svg:last-child {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .nodal-login__idioma summary svg:last-child {
    transition: none;
  }
}

/* El menú de la hoja de componentes ocupa el ancho de su padre, que aquí es
   solo el rótulo: se abre hacia la izquierda y con un mínimo. */
.nodal-login__idioma .nodal-menu {
  left: auto;
  min-width: 10rem;
}

.nodal-login__idioma .nodal-menu__opcion {
  text-decoration: none;
}

.nodal-login__idioma .nodal-menu__opcion[aria-current="true"] {
  background: var(--nodal-seleccion);
  color: var(--nodal-acento);
  font-weight: 600;
}

.nodal-login__caja {
  width: 100%;
  /* 534 px de la lámina */
  max-width: 33.375rem;
  margin: 0 auto;
  /* el control grande de esta pantalla (60 px en la lámina); el componente
     lo lee del token */
  --nodal-control-alto: 60px;
}

/* Los tamaños de texto de aquí abajo salen de calibrar Arimo contra el ancho y
   la altura de mayúscula de cada texto en la lámina (24/09/2026). */
.nodal-login__titulo {
  margin: 0 0 0.2rem;
  color: var(--nodal-texto);
  font-size: clamp(2.25rem, 3.6vw, 3.45rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.1;
}

/* Espaciada y sin punto final, como en la lámina. */
.nodal-login__bajada {
  margin: 0 0 2.8rem;
  color: var(--nodal-atenuado);
  /* 21 px a 1536; baja con el ancho para no partirse en dos renglones */
  font-size: clamp(1.0625rem, 1.37vw, 1.3125rem);
  letter-spacing: 0.06em;
}

.nodal-login__forma {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

/* El paso tiene que ser flex, y no por gusto: dentro van los dos campos y el
   enlace de «olvidaste», y sin esto pasaban dos cosas. El enlace pedía
   `align-self: flex-end` contra un padre que no era flex, así que se quedaba a
   la izquierda. Y los dos campos quedaban pegados, con lo que cada etiqueta
   caía más cerca del campo de ARRIBA que del suyo: el ojo los agrupaba mal.
   Medido en la lámina: ~46 px entre un campo y la etiqueta del siguiente. */
.nodal-login__paso {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Los campos de esta pantalla, como en la lámina: etiqueta grande y de peso
   normal, caja SIN relleno —el fondo es el del panel—, icono de 24 px y texto
   de 18. Van con `.nodal-login` delante porque la hoja de componentes se carga
   DESPUÉS de esta: a igual peso gana ella, y así se perdían el alto del botón y
   el tamaño de su letra. */
.nodal-login .nodal-campo {
  gap: 0.5rem;
}

.nodal-login .nodal-campo__etiqueta {
  color: var(--nodal-texto);
  font-size: 1.15rem;
  font-weight: 400;
}

.nodal-login .nodal-control {
  background: var(--nodal-superficie);
  font-size: 1.125rem;
}

/* El campo que el guion rechaza antes de enviar, con el mismo borde que
   .nodal-campo--error de la hoja de componentes: el rojo de la lámina desde el
   03/10/2026. El motivo lo dice el aviso del formulario (#nodalLoginAviso). */
.nodal-login .nodal-control[aria-invalid="true"] {
  border-color: var(--nodal-aviso-error-icono);
  border-width: 2px;
}

.nodal-login .nodal-control--con-icono {
  padding-left: 4.125rem;
}

.nodal-login .nodal-control--con-accion {
  padding-right: 3.5rem;
}

/* 28 px de caja para que el trazo mida lo de la lámina: el sobre 24 × 19 */
.nodal-login .nodal-campo__icono {
  left: 1.15rem;
  width: 28px;
  height: 28px;
}

.nodal-login .nodal-campo__accion {
  right: 0.85rem;
}

.nodal-login .nodal-campo__accion svg {
  width: 26px;
  height: 26px;
}

.nodal-login__olvido {
  align-self: flex-end;
  margin-top: -0.95rem;
  color: var(--nodal-acento);
  font-size: 0.97rem;
  font-weight: 500;
  text-decoration: none;
}

.nodal-login__olvido:hover,
.nodal-login__olvido:focus-visible {
  text-decoration: underline;
}

/* 67 px de alto y radio 10 en la lámina, más que los campos. */
.nodal-login .nodal-login__entrar {
  width: 100%;
  height: 4.1875rem;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
  border-radius: 10px;
  font-size: 1.3125rem;
  font-weight: 700;
}

.nodal-login .nodal-login__entrar svg {
  width: 26px;
  height: 26px;
}

.nodal-login__pie {
  margin: 3.3rem 0 0;
  color: var(--nodal-atenuado);
  font-size: 1.125rem;
  text-align: center;
}

.nodal-login__pie a {
  color: var(--nodal-acento);
  font-weight: 700;
  text-decoration: none;
}

.nodal-login__pie a:hover,
.nodal-login__pie a:focus-visible {
  text-decoration: underline;
}

/* El aviso de error o de código enviado. El tono lo da el peso, no un color de
   alarma: la paleta no tiene ninguno. */
/* Vacío no ocupa lugar: en la lámina el botón va a 38 px del enlace de
   «olvidaste», y el renglón reservado para el aviso lo bajaba 48. */
.nodal-login__aviso:empty {
  display: none;
}

.nodal-login__aviso {
  margin: 0;
  color: var(--nodal-atenuado);
  font-size: 0.875rem;
}

.nodal-login__aviso[data-tono="error"] {
  color: var(--nodal-texto);
  font-weight: 700;
}

.nodal-login__aviso[data-tono="ok"] {
  color: var(--nodal-acento);
}

.nodal-login__paso[hidden] {
  display: none;
}

/* La marca del panel solo existe cuando la escena no está. Va declarada ANTES
   del media query: si se deja después, lo pisa y no aparece nunca.
   Es una sola marca: el panel cambia de color con el tema y la tinta lo sigue,
   blanca en oscuro y carbón en claro. */
.nodal-login__marca-compacta {
  display: none;
  width: 12rem;
  height: auto;
  margin: 0 auto 2.25rem;
  color: var(--nodal-blanco);
}

body.theme-light .nodal-login__marca-compacta {
  color: var(--nodal-carbon);
}

/* --------------------------------------------------- de 991 px para abajo */

@media (max-width: 991px) {
  .nodal-login {
    grid-template-columns: minmax(0, 1fr);
  }

  .nodal-login__escena {
    display: none;
  }

  .nodal-login__panel {
    padding-top: 5rem;
  }

  .nodal-login__marca-compacta {
    display: block;
  }

  /* Sin la escena, el idioma sube a la esquina: a la altura de escritorio
     quedaba montado sobre la marca del panel. */
  .nodal-login__idioma {
    top: 1.25rem;
    right: 1.5rem;
  }
}