/* ============================================================
   Portal técnico · tokens y modo oscuro
   Se agrega DESPUÉS del :root existente de public/styles.css.
   No agrega colores nuevos: todo sale de las variables --stgn-*.
   ============================================================ */

/* 1 · Alias semánticos que faltaban (permiten el tema oscuro) */
:root{
  --stgn-surface:var(--stgn-white);
  --stgn-heading:var(--stgn-blue-900);
  --stgn-border-strong:var(--stgn-slate-400);
  --stgn-info-bg:#e9f2f7;
  --stgn-info-pill-bg:var(--stgn-slate-100);
  --stgn-info-pill-fg:var(--stgn-blue-900);
  --stgn-warning-bg:#f7ece2;
  --stgn-warning-pill-bg:#f7ece2;
  --stgn-warning-pill-fg:#8a5124;
  --stgn-success-pill-bg:#e6efeb;
  --stgn-success-pill-fg:#1b5c45;
  --stgn-grid-size:48px 48px;
  --stgn-gradient-sober:linear-gradient(135deg,var(--stgn-blue-900) 0%,var(--stgn-blue-900) 38%,var(--stgn-blue-700) 100%);
}

/* 2 · Tema oscuro · solo remapeo de variables */
[data-theme="dark"]{
  --stgn-canvas:#16242c;
  --stgn-surface:#1c2b33;
  --stgn-surface-tint:#223039;
  --stgn-ink:#e7eef2;
  --stgn-ink-muted:var(--stgn-slate-400);
  --stgn-ink-meta:var(--stgn-slate-500);
  --stgn-blue-900:#dce9f0;
  --stgn-blue-700:var(--stgn-blue-300);
  --stgn-blue-500:var(--stgn-blue-400);
  --stgn-slate-100:#2b3d47;
  --stgn-slate-300:#3c515e;
  --stgn-slate-400:#4d6675;
  --stgn-info-bg:#24343d;
  --stgn-info-pill-bg:#24343d;
  --stgn-info-pill-fg:#cfe8f7;
  --stgn-selection:#2b4351;
  --stgn-shadow:0 14px 38px rgba(0,0,0,.35);
}

/* 3 · Superficies que hoy están en blanco literal */
[data-theme] .snapshot,
[data-theme] .searchbar,
[data-theme] .card,
[data-theme] .control,
[data-theme] .source-panel,
[data-theme] .spec,
[data-theme] .snapshot-cell,
[data-theme] .flags li,
[data-theme] .cleaning-item{background:var(--stgn-surface)}
[data-theme] .logo-slot{background:var(--stgn-white)}      /* el imagotipo siempre sobre blanco */
[data-theme] footer{background:#1f3947}                     /* el pie no se aclara */
[data-theme] .control input,[data-theme] .control select{color:var(--stgn-ink)}
[data-theme] .source-table thead th{background:var(--stgn-heading);color:var(--stgn-canvas)}
[data-theme] .qr,[data-theme] .skeleton-qr{background:var(--stgn-surface-tint)}

/* 4 · Cabecera sobria: degradé corto, sin llegar al Azul 500 */
.masthead{background-image:var(--stgn-grid-overlay),var(--stgn-gradient-sober);background-size:var(--stgn-grid-size),var(--stgn-grid-size),cover}
.hero h1{color:var(--stgn-white)}
.hero>p{color:rgba(255,255,255,.92)}
.env{color:rgba(255,255,255,.92)}
.nav{display:none}                                          /* pestañas retiradas del topbar */

/* 5 · Switch de tema (topbar, a la derecha del indicador de entorno) */
.theme-toggle{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 6px 0 12px;border:1px solid rgba(255,255,255,.34);border-radius:var(--stgn-radius-pill);background:rgba(31,57,71,.34);color:var(--stgn-white);font:600 var(--stgn-text-12)/1 var(--stgn-font-brand);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color 150ms ease}
.theme-toggle:hover{background:rgba(31,57,71,.6)}
.theme-toggle .track{display:inline-flex;align-items:center;width:36px;height:20px;padding:2px;border-radius:var(--stgn-radius-pill);background:rgba(255,255,255,.22)}
.theme-toggle .knob{width:16px;height:16px;border-radius:var(--stgn-radius-pill);background:var(--stgn-white);transition:transform 150ms ease}
[data-theme="dark"] .theme-toggle .knob{transform:translateX(16px)}
.topbar .env-group{display:flex;align-items:center;gap:16px}

/* 6 · Validación de limpieza más compacta */
.cleaning-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.cleaning-item{padding:10px 12px}
.cleaning-title strong{font-size:var(--stgn-text-12)}
.cleaning-grid dt{font-size:9px}
.cleaning-grid dd{font-size:11px;line-height:1.3}
@media(max-width:1024px){.cleaning-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:768px){.cleaning-list{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.theme-toggle,.theme-toggle .knob{transition:none}}