/* ════════════════════════════════════════════════════
   ServiTech — MODO NOCHE
   Redefine las variables compartidas cuando html[data-theme="dark"].
   Las páginas usan var(--bg/--surface/--text/…), así que con esto
   toda la app cambia a oscuro sin tocar cada plantilla.
════════════════════════════════════════════════════ */
:root[data-theme="dark"]{
  --bg:#0a0f1e;
  --surface:#131b2e;
  --surface2:#1b2440;
  --border:#28344e;
  --border2:#3a4a6b;
  --text:#e8edf7;
  --text2:#c2ccdd;
  --text3:#93a0b7;
  --text4:#6a778f;

  /* tintes claros → translúcidos para que funcionen en oscuro */
  --blue-lt:rgba(59,114,246,.20);
  --green-lt:rgba(16,185,129,.18);
  --red-lt:rgba(212,43,79,.20);
  --orange-lt:rgba(232,98,10,.20);
  --amber-lt:rgba(245,158,11,.18);
  --purple-lt:rgba(168,85,247,.20);
  --wa-lt:rgba(37,211,102,.18);

  /* Acentos más luminosos: el azul/verde oscuros no contrastan en fondo oscuro */
  --blue:#5b9bff;
  --blue-mid:#82b1ff;
  --green:#2ed3a0;

  --shadow-sm:0 1px 3px rgba(0,0,0,.45);
  --shadow:0 8px 24px rgba(0,0,0,.5);
  --shadow-lg:0 18px 50px rgba(0,0,0,.65);
  --shadow-blue:0 8px 26px rgba(0,0,0,.5);

  color-scheme: dark;
}

/* Modales (modal.css tiene blanco hardcodeado) */
[data-theme="dark"] .modal-overlay{ background:rgba(0,0,0,.64) !important; }
[data-theme="dark"] .modal-overlay > .modal{ background:var(--surface) !important; border-color:var(--border) !important; }
[data-theme="dark"] .modal-overlay > .modal::-webkit-scrollbar-track{ background:var(--surface2); }
[data-theme="dark"] .modal-overlay > .modal::-webkit-scrollbar-thumb{ background:var(--border2); }

/* Campos de formulario que puedan traer fondo claro hardcodeado */
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
[data-theme="dark"] select,
[data-theme="dark"] textarea{
  background:var(--surface2);
  color:var(--text);
  border-color:var(--border);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder{ color:var(--text4); }
[data-theme="dark"] ::selection{ background:rgba(59,114,246,.35); }

/* Tablas: hover claro hardcodeado (#f5f7ff) en index/finanzas */
[data-theme="dark"] tbody tr:hover td{ background:var(--surface2); }

/* Tooltip de la gráfica de barras: bg = var(--text) (claro en oscuro) → texto legible */
[data-theme="dark"] .bar-tip{ color:var(--surface); }

/* Caja de previsualización de WhatsApp (verde claro hardcodeado) */
[data-theme="dark"] .wa-preview{
  background:rgba(37,211,102,.12);
  color:var(--text);
  border-color:rgba(37,211,102,.32);
}

/* Hover del botón salir con rosa claro hardcodeado (#fff0f3) en index/finanzas */
[data-theme="dark"] .btn-logout:hover{ background:var(--red-lt); }

/* Cabecera de orden (detalle): el degradado claro hardcodeado (#dce8ff) no servía en oscuro */
[data-theme="dark"] .folio-badge{
  background:linear-gradient(135deg, rgba(91,155,255,.16), rgba(91,155,255,.05));
  border-color:rgba(91,155,255,.30);
}
[data-theme="dark"] .folio-meta .fecha{ color:var(--text2); }

/* ── Botón de cambio de tema (nav) ── */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:9px;
  border:1.5px solid var(--border);background:var(--surface2);
  color:var(--text3);font-size:17px;cursor:pointer;line-height:1;
  transition:all .18s;
}
.theme-toggle:hover{ color:var(--blue);border-color:var(--blue);background:var(--blue-lt); }
.theme-toggle:active{ transform:scale(.92); }

/* Variante flotante (páginas sin navbar, p.ej. login) */
.theme-toggle.floating{
  position:fixed;top:16px;right:16px;z-index:500;
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;backdrop-filter:blur(6px);font-size:18px;
}
.theme-toggle.floating:hover{ background:rgba(255,255,255,.2); }