/* Pantalla de ingreso de Pluto (lo único que se sirve sin sesión).
   Una sola columna centrada, al estilo de los logins limpios: marca arriba, dos
   renglones de saludo, y abajo las formas de entrar. Grises y celestes claros. */
:root {
  --fondo: #eef2f7; --papel: #ffffff; --tinta: #1b2735; --tinta-2: #64748b;
  --borde: #dce4ee; --borde-fuerte: #c6d2e0;
  --celeste: #0284c7; --celeste-2: #0369a1; --celeste-suave: #e0f2fe; --sobre-celeste: #ffffff;
  --alerta: #b4452b; --alerta-bg: #fdeae4; --alerta-borde: #f6cdc0;
  --ok: #0f766e;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0b1220; --papel: #131d2c; --tinta: #e8eef7; --tinta-2: #93a3b8;
    --borde: #243249; --borde-fuerte: #32445f;
    --celeste: #38bdf8; --celeste-2: #7dd3fc; --celeste-suave: #0f2a3d; --sobre-celeste: #06202e;
    --alerta: #f3a890; --alerta-bg: #3a1f18; --alerta-borde: #543024;
    --ok: #5eead4;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body.login {
  margin: 0; min-height: 100svh; color: var(--tinta);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(42% 32% at 50% 0%, var(--celeste-suave) 0%, transparent 72%),
    var(--fondo);
  display: grid; place-items: center;
  padding: 40px max(20px, env(safe-area-inset-left)) 40px;
}

.hoja {
  width: 100%; max-width: 372px; text-align: center;
  animation: subir .45s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hoja { animation: none; } }

/* ── Marca y saludo ──────────────────────────────────────────────────────── */
.marca { width: 56px; height: 56px; display: block; margin: 0 auto 22px; }
h1 { margin: 0; font: 600 25px/1.25 inherit; letter-spacing: -.02em; }
.sub { margin: 2px 0 28px; color: var(--tinta-2); font-size: 17px; }

/* ── Campos y botones ────────────────────────────────────────────────────── */
.oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
form { display: grid; gap: 10px; }
input {
  width: 100%; min-height: 52px; padding: 12px 20px; font: inherit; font-size: 16px; color: inherit;
  text-align: center; background: var(--papel); border: 1px solid var(--borde); border-radius: 999px;
  transition: border-color .18s, box-shadow .18s;
}
input::placeholder { color: var(--tinta-2); }
input:hover { border-color: var(--borde-fuerte); }
input:focus {
  outline: none; border-color: var(--celeste);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--celeste) 18%, transparent);
}

button {
  width: 100%; min-height: 52px; padding: 12px 20px; border-radius: 999px; cursor: pointer;
  font: 600 16px/1.2 inherit; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .18s, color .18s, border-color .18s, transform .12s, box-shadow .18s;
}
.principal {
  margin-top: 6px; border: 0; background: var(--celeste); color: var(--sobre-celeste);
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--celeste) 90%, transparent);
}
.principal:hover { background: var(--celeste-2); }
.secundario { border: 1px solid var(--borde); background: var(--papel); color: var(--tinta); }
.secundario:hover { border-color: var(--celeste); color: var(--celeste); }
button:active { transform: scale(.985); }
button[disabled] { opacity: .55; cursor: progress; }
:is(input, button, a):focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; }
.huella { width: 21px; height: 21px; flex: none; }

/* ── «o» entre las dos formas de entrar ──────────────────────────────────── */
.o {
  display: flex; align-items: center; gap: 14px; margin: 18px 0;
  color: var(--tinta-2); font-size: 14px;
}
.o::before, .o::after { content: ""; height: 1px; flex: 1; background: var(--borde); }

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.error, .dicho.bien, .dicho.mal {
  padding: 11px 16px; border-radius: 16px; font-size: 15px; font-weight: 600;
}
.error { margin: 0 0 16px; background: var(--alerta-bg); border: 1px solid var(--alerta-borde); color: var(--alerta); }
/* El renglón que va contando qué pasa con la llave: avisa, no asusta. Suelto, sin
   recuadro, para que no se confunda con otro botón; se pinta sólo al salir o fallar. */
.dicho { margin: 14px 0 0; color: var(--tinta-2); font-size: 14px; }
.dicho.mal { background: var(--alerta-bg); border: 1px solid var(--alerta-borde); color: var(--alerta); }
.dicho.bien { background: var(--celeste-suave); border: 1px solid color-mix(in srgb, var(--celeste) 32%, transparent);
              color: var(--ok); }

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie { margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--borde);
       color: var(--tinta-2); font-size: 14px; line-height: 1.5; }
.pie strong { color: var(--tinta); font-weight: 600; }