/* Página de acceso (la sirve Flask, no Angular). Mismos colores que la app */
:root {
  color-scheme: light dark;
  --fondo: light-dark(#f8f9fb, #0d1117);
  --panel: light-dark(#ffffff, #151a22);
  --borde: light-dark(#e6e8ec, #262d39);
  --texto: light-dark(#111827, #e8ebf1);
  --suave: light-dark(#6b7280, #8e98aa);
  --boton: light-dark(#111827, #e8ebf1);
  --boton-texto: light-dark(#ffffff, #0d1117);
  --foco: light-dark(#2563eb, #6ea2ff);
  --peligro: light-dark(#dc2626, #f87171);
  font-family: system-ui, sans-serif;
  color: var(--texto);
}
:root[data-theme="claro"] { color-scheme: light; }
:root[data-theme="oscuro"] { color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--fondo); }

.caja {
  display: grid; gap: 16px; width: min(360px, 100%); padding: 32px 28px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 16px;
  box-shadow: 0 10px 30px rgb(0 0 0 / .06);
}
.caja img { border-radius: 14px; }
h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.01em; }
.subtitulo { margin: 4px 0 0; color: var(--suave); font-size: 14px; }

label { display: grid; gap: 6px; font-size: 13px; color: var(--suave); }
input {
  height: 40px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--texto);
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
}
input:focus { outline: 2px solid var(--foco); outline-offset: -1px; border-color: transparent; }

button {
  height: 42px; margin-top: 4px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--boton); color: var(--boton-texto); font: inherit; font-weight: 600;
}
.error { margin: 0; color: var(--peligro); font-size: 14px; }