/* La pantalla de entrar: los mismos colores que panel.css (aquí se repiten porque esta página no puede cargar panel.css sin haber entrado). */
:root {
  --fondo: #f6f5f2;
  --caja: #ffffff;
  --borde: #e4e1da;
  --texto: #1d1c1a;
  --suave: #6b675f;
  --acento: #2f5d50;
  --rojo: #e02424;
  --rojo-fondo: #fdecec;
  --campo: #fbfaf8;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #141513;
    --caja: #1c1d1b;
    --borde: #2c2e2a;
    --texto: #e9e7e1;
    --suave: #9b978d;
    --acento: #7fc0a8;
    --rojo: #f05252;
    --rojo-fondo: #3a1f1d;
    --campo: #161715;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: grid;
  place-items: center;
  padding: 16px;
  min-height: 100dvh;
}
.tarjeta {
  width: 100%;
  max-width: 380px;
  background: var(--caja);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 28px 26px 26px;
}
.icono { display: block; width: 48px; height: 48px; border-radius: 12px; margin-bottom: 16px; box-shadow: 0 0 0 1px var(--borde); }
h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.sub { margin: 2px 0 20px; font-size: 13px; color: var(--suave); }

form { display: grid; gap: 14px; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; }
input {
  font: inherit;
  font-size: 16px; /* con menos, el iPhone hace zoom al tocar el campo */
  color: var(--texto);
  background: var(--campo);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
}
input:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; }
.ayuda { font-size: 12px; font-weight: 400; color: var(--suave); }
button {
  font: inherit;
  font-weight: 600;
  margin-top: 6px;
  background: var(--texto);
  color: var(--caja);
  border: 0;
  border-radius: 10px;
  padding: 11px 0;
}
button:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.codigo { font-size: 24px; letter-spacing: 0.18em; text-align: center; font-variant-numeric: tabular-nums; }
.volver { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--suave); text-decoration: none; }
.volver:hover { color: var(--texto); text-decoration: underline; }

.aviso { margin: 0 0 16px; font-size: 13px; padding: 9px 12px; border-radius: 10px; background: var(--campo); border: 1px solid var(--borde); }
.aviso--mal { background: var(--rojo-fondo); border-color: transparent; color: var(--rojo); font-weight: 500; }