/* Brújula · pantalla de entrada (única página pública). Autocontenida: no carga la hoja de la aplicación. */
:root {
  --bg: #F5F7FB; --card: #FFFFFF; --text: #14243A; --text-2: #526277; --accent: #0D9488; --accent-strong: #0F766E;
  --line: #E3E8F0; --red: #B91C1C; --red-bg: #FDECEC; --amber: #B45309; --amber-bg: #FEF3E2; --info: #1D4ED8; --info-bg: #E8EEFD;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0E1726; --card: #162235; --text: #E8EEF7; --text-2: #A3B2C6; --accent: #2DD4BF; --accent-strong: #14B8A6; --line: #243349; --red: #F87171; --red-bg: #3B1818; --amber: #FBBF24; --amber-bg: #3A2D10; --info: #93B4FF; --info-bg: #17254A; }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--bg); color: var(--text); font: 400 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
main { width: min(420px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.marca { display: flex; align-items: center; gap: 12px; }
.marca img { width: 40px; height: 40px; border-radius: 10px; }
h1 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
.muted { color: var(--text-2); }
.aviso { border-radius: 10px; padding: 10px 12px; font-weight: 600; }
.aviso.err { background: var(--red-bg); color: var(--red); }
.aviso.warn { background: var(--amber-bg); color: var(--amber); }
.aviso.info { background: var(--info-bg); color: var(--info); }
.boton { display: block; text-align: center; text-decoration: none; background: var(--accent-strong); color: #fff; font-weight: 650; padding: 13px 16px; border-radius: 10px; min-height: 44px; }
.boton:hover { filter: brightness(1.06); }
.boton:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.boton.secundario { background: transparent; color: var(--accent-strong); border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { .boton { color: #04211E; } }