/* Pantalla de acceso de JARVIS 2.0. Estilo Auros.
   Los colores, tamanos y radios salen todos de tokens.css: aqui no hay ni un
   valor literal de color. Si hace falta uno nuevo, se anade alla. */

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--e-24);
}

/* El orbe. Es la pieza que define la marca en la referencia -una esfera de
   particulas bioluminiscente- y aqui se consigue con dos degradados radiales
   sobre el lienzo, sin una sola imagen ni un solo script: la politica de
   contenido de este sitio es `default-src 'none'` y no se relaja por un adorno.
   Queda detras de todo y no intercepta el raton. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42rem 42rem at 50% -8rem,
      rgba(0, 130, 124, .38) 0%,
      rgba(0, 130, 124, .12) 42%,
      transparent 70%),
    radial-gradient(28rem 28rem at 84% 92%,
      rgba(250, 209, 255, .10) 0%,
      transparent 68%);
}

main {
  width: 100%;
  max-width: 24rem;
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

header {
  margin-bottom: var(--e-32);
}

header h1 {
  /* Mas contenido que el display de la referencia: es una pantalla de acceso,
     no una portada. El interletrado negativo se conserva, que es lo que da la
     voz tipografica. */
  font-size: var(--t-sub);
  letter-spacing: var(--tk-sub);
}

/* ── Formulario ───────────────────────────────────────────────────────────── */

form {
  padding: var(--e-36);
  background: var(--alga);           /* nivel 2: tarjeta elevada */
  border-radius: var(--radio-tarjeta);
  /* Sin sombra y sin borde. La elevacion es el salto de superficie. */
}

label {
  display: block;
  margin-bottom: var(--e-20);
  color: var(--plateado);
  font-size: var(--t-mini);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tk-mini);
  text-transform: uppercase;
}

input {
  display: block;
  width: 100%;
  margin-top: var(--e-12);
  padding: .7rem .75rem;
  /* El campo se hunde respecto a la tarjeta: nivel 1 dentro del nivel 2. Esa
     es la unica forma de profundidad que admite el sistema. */
  background: var(--hundido);
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  color: var(--niebla);
  font: var(--peso-normal) var(--t-base)/var(--alto-cuerpo) var(--tipo);
  letter-spacing: 0;
  text-transform: none;
}

input::placeholder { color: var(--pizarra); }

input:focus {
  outline: none;
  /* El foco se marca con el extremo teal del degradado insignia, que es el
     unico uso cromatico que la referencia permite fuera del boton. */
  border-color: rgb(0, 130, 124);
  background: var(--abismo);
}

/* El codigo de seis digitos, en monoespaciada y espaciado: se teclea mirando
   el movil, y asi se comprueba de un vistazo que no falta un digito. */
input[name="codigo"] {
  font-family: var(--tipo-mono);
  font-size: var(--t-sub);
  letter-spacing: .28em;
  text-align: center;
}

/* ── Boton ────────────────────────────────────────────────────────────────── */

button {
  width: 100%;
  margin-top: var(--e-12);
  padding: .8rem 1.4rem;
  /* EL DEGRADADO AURORA, no el bioluminiscente. Medido: el texto oscuro pasa
     AA en los cuatro tramos del aurora (11.84 a 15.67); sobre el
     bioluminiscente no hay NINGUN color de texto que funcione de un extremo al
     otro -el oscuro da 3.40 en el teal y el blanco 1.09 en el pale-. */
  background: var(--aurora);
  border: 0;
  border-radius: var(--radio-control);
  color: var(--sobre-aurora);
  font: var(--peso-medio) 14px/1.2 var(--tipo);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

button:hover:not(:disabled) { filter: brightness(1.06); }
button:focus-visible { outline: 2px solid var(--niebla); outline-offset: 2px; }
button:disabled { opacity: .5; cursor: progress; }

/* ── Avisos ───────────────────────────────────────────────────────────────── */

/* UN AVISO NUNCA BAJA LA OPACIDAD: tiene que llamar la atencion, no esconderse.
   El color de estado aqui es DATO y por eso se sale de la paleta teal, que es
   la excepcion declarada en tokens.css. Se usa como borde y texto sobre un
   relleno muy tenue, no como fondo pleno: medido, `caido` sobre el abismo da
   3.33, suficiente para un borde de 1px pero no para texto, asi que el texto
   va en niebla. */
.aviso {
  margin: 0 0 var(--e-20);
  padding: .7rem .75rem;
  border: 1px solid var(--estado-caido);
  border-radius: var(--radio-control);
  background: rgba(220, 38, 38, .12);
  color: var(--niebla);
  font-size: var(--t-pequeno);
  line-height: var(--alto-cuerpo);
}

.aviso[data-tono="info"] {
  border-color: rgb(0, 130, 124);
  background: rgba(0, 130, 124, .14);
}

.aviso[hidden] { display: none; }

/* ── Pie ──────────────────────────────────────────────────────────────────── */

footer {
  margin-top: var(--e-20);
  color: var(--pizarra);           /* 3.52: vale para texto tenue no esencial */
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--tk-micro);
  text-transform: uppercase;
  text-align: center;
}

.oculto { display: none; }