/* Pantallas de acceso: solo composición; colores y tipografía vienen de tokens.css. */
body { background: var(--color-bg); }
.auth { min-height: 100vh; display: flex; flex-direction: column; }
.auth-marca { position: relative; background: var(--color-deep) url("/auth/trama.svg") center / cover; color: #fff; height: 96px; padding: 20px; box-sizing: border-box; }
.auth-logo { height: 32px; display: block; }
.auth-promesa { display: none; }
.auth-form { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 32px 20px 40px; }
.auth-caja { width: 100%; max-width: 340px; }
.auth-caja h1 { font-size: var(--text-2xl); }
.auth-texto { color: var(--color-muted); font-size: var(--text-base); margin: 6px 0 24px; }
.auth-alerta { background: var(--color-red-soft); color: var(--color-red); border-radius: var(--radius-widget); padding: 10px 12px; font-size: var(--text-sm); margin-bottom: 12px; }
.auth-alerta[hidden] { display: none; }
.auth-boton { display: block; text-align: center; padding: 11px 16px; border-radius: var(--radius-btn); background: var(--color-accent); color: #fff; font-weight: 600; text-decoration: none; }
.auth-boton:hover { background: var(--color-accent-hover); }
.auth-boton:focus-visible, .auth-pie a:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
.auth-pie { margin-top: 16px; font-size: var(--text-sm); }
.auth-pie a { color: var(--color-accent); }
@media (min-width: 768px) {
  .auth { display: grid; grid-template-columns: 1.05fr 1fr; }
  .auth-marca { height: auto; padding: 40px 48px; display: flex; flex-direction: column; }
  .auth-logo { height: 40px; align-self: flex-start; }
  .auth-promesa { display: block; margin: auto 0 0; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; letter-spacing: var(--tracking-tight3); }
  .auth-form { align-items: center; padding: 40px; }
}
/* Modo oscuro: mismos valores que tema.css del prototipo, según la preferencia del sistema. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark;
    --color-bg: #121216; --color-bg2: #0c0c0f; --color-ink: #f3f3f6; --color-text: #c9c9d1; --color-muted: #9d9da8;
    --color-accent: #8f88ff; --color-accent-hover: #a8a3ff; --color-deep: #08080b; --color-red: #f87171; --color-red-soft: #2e1517; }
  .auth-boton { color: #0d0d10; }
}