/* ===========================================================================
   LA PUERTA DEL PANEL
   ---------------------------------------------------------------------------
   POR QUÉ ESTE ARCHIVO EXISTE Y NO SE EDITÓ EL CSS COMPARTIDO.

   `index.html` vestía una tarjeta de dos campos con `styles.css` +
   `dashboard.css` + `theme-dark.css`: mil doscientas líneas hechas para once
   pantallas de tablas, de las que el login usa ochenta. Y esas tres hojas las
   comparten las once páginas viejas, que están esperando ser retiradas —
   cambiarles el acento ahí adentro tocaba once pantallas para arreglar una.

   Así que la puerta pasa a tener su propia hoja, apoyada en el MISMO juego de
   tokens que el panel nuevo (`../diseno/tokens.css`). El naranja `#ff6a1f`
   deja de llegar acá porque `styles.css` deja de cargarse, no porque se le
   haya pisado un color; y las once páginas viejas quedan exactamente como
   estaban.

   LA COMPOSICIÓN: la puerta ES el mueble.

   El panel tiene dos materiales y una regla que los ordena — el riel es un
   marino que NO se da vuelta con el tema (es cromo, mobiliario), y la hoja es
   la superficie de contenido, que sí. Acá pasa lo mismo a escala de página:
   el fondo entero es ese marino y el formulario es una hoja apoyada encima.
   Entrar no cambia de mundo: los dos materiales que ya estabas mirando se
   reacomodan, el marino se va a la izquierda y la hoja se abre en el lienzo.

   Y el marino lleva su canto: la misma línea de un pelo que separa el riel
   del escritorio, dibujada a los 248 px donde el riel va a estar. La puerta
   ya te muestra dónde queda el mueble.
   =========================================================================== */

/* ── Base ────────────────────────────────────────────────────────────────
   `tokens.css` trae los colores, la tipografía y lo que dibuja el navegador
   —selección, cursor, anillo de foco—, pero no un reset ni un `body`: eso lo
   pone cada página. */

* { box-sizing: border-box; }
body { margin: 0; }
svg { display: block; }

/* El único ícono de esta pantalla, dibujado y no un glifo: es el mismo
   triángulo de alerta que usa el panel. Vive como máscara para poder tomar
   `currentColor` y darse vuelta con el tema — ver el bloque del error. */
:root {
  --ico-alerta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.2 18 16a1.3 1.3 0 0 1-1.1 2H3.1A1.3 1.3 0 0 1 2 16z'/%3E%3Cpath d='M10 8.2v3.4'/%3E%3Ccircle cx='10' cy='14.6' r='.95' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* `hidden` tiene que ganarle a cualquier `display` del componente. `login.js`
   apaga el error con `errorEl.hidden = true`, y sin esto un `display: flex`
   se lo come y el mensaje viejo queda en pantalla. */
[hidden] { display: none !important; }

button, input {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; }

/* ── El campo marino ─────────────────────────────────────────────────────
   No se da vuelta con el tema, igual que el riel: la puerta de un local se ve
   igual a las 3 de la tarde y a las 3 de la mañana. */
.ingreso {
  position: relative;
  min-height: 100dvh;
  background: var(--rx-cromo);
  color: var(--rx-cromo-tinta);
  font: var(--rx-cuerpo);
}

/* ── LA PUERTA PARTIDA EN DOS ─────────────────────────────────────────────
   Referencia de Danilo, 2026-08-30: una mitad de color macizo que hace toda
   la presencia y otra sobria con el formulario.

   La mitad del cartel es un poco más chica que la del formulario (5fr / 6fr)
   y no mitad y mitad: el bloque de color pesa más de lo que mide, así que
   partirlo por el medio lo hace ganar. */
.ingreso-partido {
  display: grid;
  grid-template-columns: 5fr 6fr;
  min-height: 100dvh;
}

/* La mitad con presencia. El azul va en gradiente y no plano: es el mismo
   relieve del botón de marca del panel, a lo grande. */
.ingreso-lienzo {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--rx-xl);
  padding: var(--rx-xxl, 48px) var(--rx-xl);
  background: var(--rx-marca-relieve);
  color: var(--_papel);
}

/* Los dos focos de luz que le dan volumen. Sin ellos el bloque es un
   rectángulo azul y se ve barato; con ellos parece iluminado. */
.ingreso-lienzo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(680px 480px at 18% 12%, rgba(255, 255, 255, 0.20), transparent 62%),
    radial-gradient(520px 520px at 92% 96%, rgba(255, 255, 255, 0.10), transparent 60%);
  pointer-events: none;
}

/* La retícula de puntos de la esquina, como en la referencia. Es la única
   textura de la pantalla y va MUY tenue: tiene que notarse cuando la mirás,
   no mientras tecleás la contraseña. */
.ingreso-lienzo::after {
  content: '';
  position: absolute;
  left: var(--rx-xl); top: var(--rx-xl);
  width: 128px; height: 96px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.32) 1.4px, transparent 1.4px);
  background-size: 16px 16px;
  pointer-events: none;
}

.ingreso-lienzo > * { position: relative; }

.ingreso-lema {
  margin: 0;
  max-width: 15ch;
  font: var(--rx-titulo-grande, var(--rx-titulo));
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.ingreso-oficios {
  display: flex; flex-direction: column; gap: var(--rx-md);
  margin: 0; padding: 0; list-style: none;
}
.ingreso-oficios li {
  display: flex; align-items: center; gap: var(--rx-sm);
  color: rgba(255, 255, 255, 0.85);
  font: var(--rx-menor);
}
.ingreso-oficios .ico { width: 18px; height: 18px; flex: none; }

/* La mitad del formulario: sobria, sobre el papel del tema.
   El `width: min(400px, ...)` de la tarjeta vieja se reemplaza por ancho
   completo de la mitad + un tope de línea CENTRADO: si no, el formulario
   queda pegado al borde de su mitad con un vacío enorme al costado, que es
   exactamente lo que pasó en la primera versión de esta pantalla. */
.ingreso-partido > .ingreso-hoja {
  width: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* CENTRA EL FLEX, no con márgenes automáticos en cada hijo: `.ayuda` trae
     su propio `margin: 0` de la tarjeta vieja, con la misma especificidad y
     más abajo en el archivo, así que gana y ese párrafo quedaba corrido
     respecto del título y del formulario. Medido en el navegador: el h1
     arrancaba en 741 px y la ayuda en 606. */
  align-items: center;
  padding: var(--rx-xl);
  background: var(--rx-hoja);
  color: var(--rx-tinta);
}
.ingreso-partido > .ingreso-hoja > * {
  width: min(380px, 100%);
}
/* El título gana cuerpo: en la referencia el saludo del formulario es lo
   único grande de esa mitad, y acá competía en tamaño con la ayuda de
   abajo. */
.ingreso-partido > .ingreso-hoja h1 {
  font-size: clamp(26px, 2.2vw, 34px);
  letter-spacing: -0.015em;
}

/* EN PANTALLA ANGOSTA EL CARTEL SE GUARDA. No se apila arriba del
   formulario: en un teléfono eso son dos pantallas de scroll antes de
   llegar al primer campo, para leer algo que ya sabés. La marca sigue,
   porque sin ella la puerta no dice de qué es. */
@media (max-width: 860px) {
  /* `auto 1fr` y no dos filas iguales: sin esto el grid parte la altura por
     la mitad y el cartel se come media pantalla antes del primer campo.
     Medido a 375 px: ocupaba el 40 % del alto. */
  .ingreso-partido {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .ingreso-lienzo {
    padding: var(--rx-lg) var(--rx-xl);
    gap: var(--rx-md);
    justify-content: flex-start;
  }
  .ingreso-lienzo::after { display: none; }
  .ingreso-lema { font-size: 24px; max-width: none; }
  .ingreso-oficios { display: none; }
}

/* ── La marca, arriba de la hoja ─────────────────────────────────────────
   Va sobre el marino y no adentro de la tarjeta porque la marca pertenece al
   mueble: es el mismo bloque que ocupa la cabecera del riel una vez adentro. */
.ingreso-marca {
  display: flex; align-items: center; gap: var(--rx-md);
  margin-bottom: var(--rx-xl);
}
.ingreso-marca .marca-x { width: 34px; height: 34px; flex: none; }
.marca-x path { fill: none; stroke: currentColor; }
.marca-x circle { fill: currentColor; stroke: none; }
.marca-x .claro { color: var(--rx-cromo-tinta); }
.marca-x .azul { color: var(--_azul-400); }

.ingreso-marca b {
  display: block;
  font: var(--rx-pantalla); letter-spacing: var(--rx-tracking-titulo);
}
.ingreso-marca small {
  display: block;
  font: var(--rx-etiqueta); letter-spacing: var(--rx-etiqueta-tracking);
  text-transform: uppercase; color: var(--rx-cromo-tinta-suave);
}

/* La X se traza sola, una sola vez, al abrir. Es la misma animación del
   splash de las dos apps y del riel del panel — y acá es donde más sentido
   tiene, porque esta pantalla ES la primera vez. */
.marca-x path {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: trazar-x 620ms var(--rx-curva) forwards;
}
.marca-x path.claro { animation-delay: 90ms; }
.marca-x circle {
  transform-origin: center; transform: scale(0);
  animation: aterrizar-nodo 380ms var(--rx-curva) forwards;
}
.marca-x circle.azul { animation-delay: 480ms; }
.marca-x circle.claro { animation-delay: 600ms; }
@keyframes trazar-x { to { stroke-dashoffset: 0; } }
@keyframes aterrizar-nodo {
  0%   { transform: scale(0); }
  70%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .marca-x path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .marca-x circle { transform: none; animation: none; }
}

/* ── La hoja ─────────────────────────────────────────────────────────────
   Esta SÍ se da vuelta con el tema, como cualquier superficie de contenido.
   La elevación se declara una sola vez: acá es sombra y no borde, porque la
   hoja está de verdad flotando sobre el marino y no apoyada en el escritorio.
   El borde en `--rx-regla` volvería a ser el fantasma de tarjeta que el
   sistema evita. */
.ingreso-hoja {
  width: min(400px, 100%);
  padding: var(--rx-xxl);
  background: var(--rx-hoja);
  color: var(--rx-tinta);
  border-radius: var(--rx-radio-md);
  box-shadow: var(--rx-sombra-dialogo);
}
.ingreso-hoja h1 {
  margin: 0;
  font: var(--rx-seccion); letter-spacing: var(--rx-tracking-titulo);
}
.ingreso-hoja .ayuda {
  margin: var(--rx-xs) 0 var(--rx-xl);
  font: var(--rx-lectura); color: var(--rx-tinta-suave);
}

.ingreso-hoja label {
  display: block;
  margin-bottom: var(--rx-xs);
  font: var(--rx-etiqueta); letter-spacing: var(--rx-etiqueta-tracking);
  text-transform: uppercase; color: var(--rx-tinta-tenue);
}
.ingreso-hoja label + input { margin-bottom: var(--rx-lg); }

.ingreso-hoja input {
  width: 100%;
  height: var(--rx-control-alto);
  padding: 0 var(--rx-md);
  background: var(--rx-hoja-hundida);
  border: var(--rx-pelo) solid var(--rx-regla);
  border-radius: var(--rx-radio-sm);
  transition: border-color var(--rx-tiempo-rapido) var(--rx-curva);
}
.ingreso-hoja input:hover { border-color: var(--rx-regla-fuerte); }

.ingreso-hoja button[type='submit'] {
  width: 100%;
  min-height: var(--rx-control-alto);
  margin-top: var(--rx-sm);
  background: var(--rx-marca-solida);
  color: var(--rx-tinta-inversa);
  border: 0; border-radius: var(--rx-radio-sm);
  font-weight: 700;
  transition: background var(--rx-tiempo-rapido) var(--rx-curva);
}
.ingreso-hoja button[type='submit']:hover:not(:disabled) {
  background: var(--rx-marca-viva);
}
/* Entrando: el botón no se apaga a gris, se queda en el azul del compromiso.
   Un botón que se vuelve gris mientras espera se lee como "se rompió"; lo que
   pasa de verdad es que la petición está en vuelo. Lo dice el texto, que
   `login.js` cambia a "Entrando…". */
.ingreso-hoja button[type='submit']:disabled {
  opacity: 0.62; cursor: progress;
}

/* ── El error ────────────────────────────────────────────────────────────
   `login.js` escribe el mensaje con `textContent`, que borra a cualquier hijo
   del elemento. Por eso el ícono no puede ser un `<svg>` adentro: se dibuja
   con `::before`, enmascarando un SVG propio para que tome `currentColor` y
   se dé vuelta con el tema. Es el mismo triángulo del panel, no un glifo. */
.ingreso-hoja .error {
  display: flex; align-items: flex-start; gap: var(--rx-sm);
  margin: var(--rx-lg) 0 0;
  padding: var(--rx-md);
  background: var(--rx-peligro-velo);
  color: var(--rx-sobre-peligro-velo);
  border-radius: var(--rx-radio-sm);
  font: var(--rx-cuerpo);
}
.ingreso-hoja .error::before {
  content: '';
  flex: none; width: 18px; height: 18px; margin-top: 1px;
  background: currentColor;
  -webkit-mask: var(--ico-alerta) center / contain no-repeat;
  mask: var(--ico-alerta) center / contain no-repeat;
}