/* =====================================================================
   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.
   ===================================================================== */

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

body {
  margin: 0; min-height: 100vh;
  display: grid; place-items: center; padding: 24px;
  font-family: 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; }

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