/* =====================================================================
   Puerta del piloto · estilos de la pantalla de acceso
   ---------------------------------------------------------------------
   Esta pantalla no es un archivo del sitio: la arma functions/_middleware.js
   para quien todavía no tiene sesión. Aun así el CSS vive aquí, en un
   archivo aparte, por dos razones.

   La primera es la política de seguridad. La puerta se sirve con
   `style-src 'self'`, que prohíbe los estilos escritos dentro del HTML.
   Mientras las reglas estuvieron en línea, el navegador las rechazaba y
   la pantalla salía sin ningún formato. Con un archivo propio la política
   se cumple sin abrir la mano y sin agregar hashes.

   La segunda es de lectura: treinta reglas CSS concatenadas como texto
   dentro de un archivo JavaScript no se leen, no se revisan y no se
   corrigen. Aquí son CSS y se comportan como CSS.

   _routes.json deja /assets/* fuera del Worker, así que este archivo se
   sirve sin pedir sesión. Es lo que corresponde: sin él la puerta no se
   puede mostrar.
   ===================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/assets/fuentes/inter-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh;
  display: grid; place-items: center; padding: 24px;
  font-family: "Inter", Arial, Helvetica, sans-serif;
  background: #f5f5f5; color: #04065a;
}

.caja {
  width: min(100%, 440px);
  background: #fff; border-radius: 20px; padding: 40px 36px;
  box-shadow: 0 18px 48px rgba(4, 6, 90, .12);
}

/* El rótulo va arriba y el subtítulo debajo, no al lado: dos textos de
   distinto tamaño puestos en línea quedan torcidos. */
.marca { margin-bottom: 26px; }
.rotulo { display: block; width: 150px; height: auto; }

h1 { margin: 0; font-size: 25px; line-height: 1.2; }
p.sub { margin: 10px 0 26px; font-size: 15px; line-height: 1.35; color: #545454; }

label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
input {
  width: 100%; height: 50px; padding: 0 15px; font-size: 16px;
  border-radius: 10px; border: 1px solid #c4c4c4;
  background: #f5f5f5; color: #04065a; font-family: inherit;
}
/* El foco nunca se elimina: es navegación por teclado y es accesibilidad. */
input:focus { outline: 3px solid rgba(28, 115, 203, .35); outline-offset: 1px; border-color: #1c73cb; }

button {
  width: 100%; height: 50px; margin-top: 16px; border: 0; border-radius: 10px;
  cursor: pointer; background: #04065a; color: #fff;
  font-size: 16px; font-weight: 700; font-family: inherit;
}
button:hover { background: #02032d; }

.aviso {
  margin-top: 20px; padding: 14px 16px; border-radius: 10px;
  background: #f5d6d6; border-left: 4px solid #cf1717;
  font-size: 14px; line-height: 1.35; color: #760a0a;
}
.aviso a { color: #760a0a; }

/* La línea que avisa que se abre WhatsApp. Va dentro del mismo bloque
   rojo y no en un párrafo aparte: es la letra chica de ese aviso, no
   otro aviso. Mantiene el color —el contraste ya está comprobado— y solo
   baja de tamaño: aclararlo para que «se note menos» es la forma de
   dejar sin leer justamente lo que evita la sorpresa. */
.aviso small { display: block; margin-top: 6px; font-size: 12px; }

.pie { margin-top: 26px; font-size: 12px; line-height: 1.45; color: #545454; }

/* ── El consentimiento de entrada ─────────────────────────────────────
   La casilla va dentro de la etiqueta para que el texto entero sea área
   de pulsación: en un teléfono, un cuadrado de 18 px es un blanco
   imposible. Y hay que deshacer dos reglas de más arriba, que están
   escritas para los campos de texto: el ancho completo y el grosor del
   rótulo convertirían la casilla en una barra negrita de borde a borde. */
.consiento {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 18px; font-size: 12px; font-weight: 400; line-height: 1.45;
  color: #3a3a3a; cursor: pointer;
}
.consiento input[type="checkbox"] {
  width: 18px; height: 18px; flex: 0 0 18px;
  margin: 1px 0 0; padding: 0; accent-color: #04065a; cursor: pointer;
}
.consiento input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(28, 115, 203, .35); outline-offset: 2px;
}
/* El rótulo en su propia línea y el cuerpo debajo, más chico y más
   claro (pedido de Andrés). Son dos cosas distintas: una dice de qué se
   trata la casilla y la otra es la cláusula. Puestas en el mismo renglón
   y del mismo tamaño se leen como un párrafo solo, y el rótulo deja de
   servir para lo único que sirve, que es saber qué se está marcando.

   El gris no baja más: a 11 px, #666 sobre blanco da 5,7:1, con holgura
   sobre el 4,5:1 que exige el nivel AA. Un gris más claro se vería
   elegante y dejaría la cláusula ilegible, que en un texto que alguien
   tiene que aceptar es lo peor que puede pasar. */
.consiento b { display: block; font-weight: 700; }
.consiento__texto {
  display: block; margin-top: 3px; font-size: 11px; color: #666;
}