/* A — Neutro frío, alto contraste. Linares/Vercel: casi sin bordes, jerarquía
   por superficie y peso tipográfico. */
/* Solo la paleta clara. Antes esto colgaba de `:root` a secas y, como el tema
   se carga después de app.css, pisaba también la paleta oscura del sistema: en
   modo automático con el equipo en oscuro la app salía clara pero con la barra
   oscura encima, y la navegación quedaba gris sobre gris. */
:root[data-theme='light'] {
  --surface-0:#f7f8f9; --surface-1:#ffffff; --surface-2:#f1f2f4;
  --line:#e6e8eb; --line-soft:#eef0f2; --line-control:#d3d7dc;
  --text-primary:#0d0f12; --text-secondary:#4a4f57; --text-muted:#6b7280;
  --accent:#0a5cd6; --accent-ink:#ffffff; --accent-soft:#e6f0fd; --accent-soft-ink:#0848a8;
  --radius:10px; --radius-sm:7px;
  --shadow:0 1px 2px rgba(16,20,28,.04), 0 4px 12px rgba(16,20,28,.04);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --surface-0:#f7f8f9; --surface-1:#ffffff; --surface-2:#f1f2f4;
    --line:#e6e8eb; --line-soft:#eef0f2; --line-control:#d3d7dc;
    --text-primary:#0d0f12; --text-secondary:#4a4f57; --text-muted:#6b7280;
    --accent:#0a5cd6; --accent-ink:#ffffff; --accent-soft:#e6f0fd; --accent-soft-ink:#0848a8;
    --radius:10px; --radius-sm:7px;
    --shadow:0 1px 2px rgba(16,20,28,.04), 0 4px 12px rgba(16,20,28,.04);
  }
}
body { font-family: 'Inter var', Inter, system-ui, sans-serif; }
header.topbar { backdrop-filter:blur(12px); }
.card { border:1px solid var(--line); box-shadow:var(--shadow); }
/* Campos sobre fondo limpio: el relleno gris ensuciaba los formularios largos
   y hacía que un campo lleno y uno vacío se vieran igual de "ocupados". El
   contorno basta para delimitarlos. */
input, select, textarea { background:var(--surface-1); border:1px solid var(--line-control); }
input:hover, select:hover, textarea:hover { border-color:var(--text-muted); }
input:focus, select:focus, textarea:focus { background:var(--surface-1); border-color:var(--accent); }
input:disabled, select:disabled { background:var(--surface-2); color:var(--text-muted); }
.stat, .cuenta { border:1px solid var(--line); }
h1 { letter-spacing:-.028em; font-weight:680; }
.card-head h2 { letter-spacing:-.014em; }
th { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); font-weight:600; }

/* La barra pasa de degradado oscuro a blanco translúcido, así que todo lo que
   app.css pintaba de blanco para verse sobre el degradado quedaría invisible.
   Aquí se devuelve el contraste — solo en claro: en oscuro la barra sigue
   siendo oscura y el blanco original es el que se lee. */
:root[data-theme='light'] header.topbar .brand,
:root[data-theme='light'] header.topbar .brand span { color: var(--text-primary); }
:root[data-theme='light'] header.topbar .brand .dot { background: var(--accent); }
:root[data-theme='light'] nav.nav a { color: var(--text-secondary); }
:root[data-theme='light'] nav.nav a:hover { background: var(--surface-2); color: var(--text-primary); }
:root[data-theme='light'] nav.nav a.active { background: var(--accent-soft); color: var(--accent-soft-ink); }
:root[data-theme='light'] .topbar button.icon,
:root[data-theme='light'] .topbar button.ghost {
  background: var(--surface-1);
  color: var(--text-primary);
  border-color: var(--line-control);
}
:root[data-theme='light'] .topbar button.icon:hover,
:root[data-theme='light'] .topbar button.ghost:hover { background: var(--surface-2); }
:root[data-theme='light'] #userLabel { color: var(--text-secondary); }
:root[data-theme='light'] .topbar :focus-visible { box-shadow: 0 0 0 4px var(--surface-1); outline-color: var(--text-primary); }

/* En "auto" no hay atributo data-theme, así que el mismo tratamiento se aplica
   cuando el sistema está en claro. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) header.topbar .brand,
  :root:not([data-theme='dark']) header.topbar .brand span { color: var(--text-primary); }
  :root:not([data-theme='dark']) header.topbar .brand .dot { background: var(--accent); }
  :root:not([data-theme='dark']) nav.nav a { color: var(--text-secondary); }
  :root:not([data-theme='dark']) nav.nav a:hover { background: var(--surface-2); color: var(--text-primary); }
  :root:not([data-theme='dark']) nav.nav a.active { background: var(--accent-soft); color: var(--accent-soft-ink); }
  :root:not([data-theme='dark']) .topbar button.icon,
  :root:not([data-theme='dark']) .topbar button.ghost {
    background: var(--surface-1);
    color: var(--text-primary);
    border-color: var(--line-control);
  }
  :root:not([data-theme='dark']) #userLabel { color: var(--text-secondary); }
}

/* La barra blanca necesita su línea inferior; el degradado no la llevaba. */
:root[data-theme='light'] header.topbar { background: rgba(255,255,255,.82); border-bottom: 1px solid var(--line); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) header.topbar { background: rgba(255,255,255,.82); border-bottom: 1px solid var(--line); }
}