/* Tema claro / oscuro compartido por el panel del jefe y la app del guardia.
   Por defecto sigue al sistema; el botón (tema.js) lo fija con data-theme="light|dark" en <html>. */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --panel: #131c2e;
  --panel-2: #1a2438;
  --borde: #2a3850;
  --texto: #e2e8f0;
  --texto-tenue: #8fa3bd;
  --accent: #38bdf8;
  --on-accent: #06283a;
  --verde: #22c55e;
  --on-verde: #06280f;
  --amarillo: #eab308;
  --rojo: #ef4444;
  --on-rojo: #2a0606;
  --campo-bg: #0d1526;
  --overlay: rgba(3, 8, 18, 0.75);
  --ok-bg: #10321c; --ok-bd: #14532d; --ok-tx: #86efac;
  --err-bg: #3a1414; --err-bd: #7f1d1d; --err-tx: #fca5a5;
  --warn-bg: #3a2f0d; --warn-bd: #713f12; --warn-tx: #fde68a;
  --hover-zona: rgba(56, 189, 248, 0.08);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f1f5f9;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --borde: #cbd5e1;
  --texto: #0f172a;
  --texto-tenue: #475569;
  --accent: #0369a1;
  --on-accent: #ffffff;
  --verde: #15803d;
  --on-verde: #ffffff;
  --amarillo: #a16207;
  --rojo: #b91c1c;
  --on-rojo: #ffffff;
  --campo-bg: #ffffff;
  --overlay: rgba(15, 23, 42, 0.45);
  --ok-bg: #dcfce7; --ok-bd: #86efac; --ok-tx: #166534;
  --err-bg: #fee2e2; --err-bd: #fca5a5; --err-tx: #991b1b;
  --warn-bg: #fef9c3; --warn-bd: #fde047; --warn-tx: #854d0e;
  --hover-zona: rgba(3, 105, 161, 0.08);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f1f5f9;
    --panel: #ffffff;
    --panel-2: #f8fafc;
    --borde: #cbd5e1;
    --texto: #0f172a;
    --texto-tenue: #475569;
    --accent: #0369a1;
    --on-accent: #ffffff;
    --verde: #15803d;
    --on-verde: #ffffff;
    --amarillo: #a16207;
    --rojo: #b91c1c;
    --on-rojo: #ffffff;
    --campo-bg: #ffffff;
    --overlay: rgba(15, 23, 42, 0.45);
    --ok-bg: #dcfce7; --ok-bd: #86efac; --ok-tx: #166534;
    --err-bg: #fee2e2; --err-bd: #fca5a5; --err-tx: #991b1b;
    --warn-bg: #fef9c3; --warn-bd: #fde047; --warn-tx: #854d0e;
    --hover-zona: rgba(3, 105, 161, 0.08);
  }
}

/* Botón de tema (lo crea tema.js) */
.tema-btn {
  position: fixed; top: 10px; right: 10px; z-index: 60;
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--borde);
  background: var(--panel); color: var(--texto); cursor: pointer;
}
.tema-btn--inline { position: static; flex: none; }
body:has(#app-admin:not(.oculto)) .tema-btn:not(.tema-btn--inline) { display: none; }
.tema-grupo { display: flex; align-items: center; gap: 10px; }
.tema-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tema-btn:focus-visible { outline: 2px solid var(--accent); }