/*
 * El tema oscuro es una capa de override porque el CSS compilado no genera
 * utilidades dark: de Tailwind. Conservamos los puntos de entrada existentes
 * para que cambiar un token aquí cambie el tema sin recompilar Tailwind.
 * Los escalones cortos de superficie separan paneles sin recurrir al azul
 * marino ni a contrastes duros. El modo claro conserva sus propias variables.
 */
html.dark {
  --bg: #0b0c0e;
  --surface: #141517;
  --surface-2: #191a1d;
  --surface-3: #1e1f23;
  --sidebar-bg: #0d0e10;
  --line: #24262b;
  --line-soft: #1c1e22;
  --line-strong: #34363d;
  --ink: #f2f3f5;
  --muted: #b7bac1;
  --muted-2: #858991;
  --disabled: #5f636b;
  --accent: #4A8BE8;
  --accent-soft: rgba(74, 139, 232, .13);
  --accent-strong: #6BA3F0;
  --ok: #38b894;
  --ok-bg: rgba(56, 184, 148, .10);
  --warn: #e7b75f;
  --warn-bg: rgba(231, 183, 95, .10);
  --danger: #e66b73;
  --danger-bg: rgba(230, 107, 115, .10);

  /* Los nombres heredados siguen vivos en el HTML y los módulos dinámicos. */
  --med: var(--accent);
  --med-dark: var(--accent-strong);
  --med-soft: var(--accent-soft);
  --navy: var(--accent);
  --navy-deep: var(--surface-3);
  --navy-700: var(--accent-strong);
  --teal: var(--accent);
  --teal-600: var(--accent-strong);
  --teal-tint: var(--accent-soft);
  --emerald: var(--ok);

  /* El primario claro distingue la acción principal sin saturar el panel. */
  --primary-top: #f5f5f6;
  --primary-bottom: #dedfe2;
  --primary-ink: #17181a;
  --primary-shadow: 0 1px 1px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.48) inset;
  --panel-light: linear-gradient(180deg, rgba(255,255,255,.018), transparent 42%);
  --panel-shadow: 0 1px 0 rgba(255,255,255,.025) inset;
  --header-halo: radial-gradient(62% 100% at 50% -34%, rgba(74,139,232,.09), transparent 68%);
  --row-hover: rgba(255,255,255,.018);
  --scroll-thumb: #303238;
  --mobile-shadow: 0 -8px 28px -16px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* Conservamos la cobertura anterior mientras se migra el marcado por etapas. */
html.dark .fade-bottom::after {background:linear-gradient(to top,var(--surface),transparent);}
html.dark body { background:var(--bg) !important; color:var(--ink) !important; }
html.dark .bg-white { background-color:var(--surface) !important; }
html.dark .bg-slate-50,
html.dark .bg-slate-100,
html.dark .bg-slate-50\/50,
html.dark .bg-slate-50\/40 { background-color:var(--surface-2) !important; }
html.dark .bg-slate-200 { background-color:var(--surface-3) !important; }
/* Interruptores (17-sep-2026): el riel es bg-slate-200 -- que aquí arriba se vuelve superficie CON
   !important -- y el encendido es peer-checked:bg-emerald-500 SIN !important, así que encendido y
   apagado se veían igual (solo se movía la bolita). Pesa en el paso 4, donde el doctor elige qué días
   abre. Más específico que la regla de arriba, así que gana. */
html.dark .peer:checked ~ .peer-checked\:bg-emerald-500 { background-color:var(--ok) !important; }
html.dark .peer:checked ~ .peer-checked\:bg-teal-600 { background-color:var(--teal-600) !important; }
html.dark .bg-slate-800,
html.dark .bg-slate-900,
html.dark .bg-black { background-color:var(--bg) !important; }
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-slate-200:hover { background-color:var(--surface-3) !important; }
/* Los niveles de texto mantienen legible el contenido sin usar blanco puro. */
html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700 { color:var(--ink) !important; }
html.dark .text-slate-600,
html.dark .text-slate-500,
html.dark .text-slate-400,
html.dark .text-slate-300 { color:var(--muted) !important; }
html.dark .border-slate-100,
html.dark .border-slate-150,
html.dark .border-slate-200,
html.dark .border-slate-300 { border-color:var(--line) !important; }
/* Teal identifica la marca; emerald y green conservan el significado de correcto. */
html.dark .text-teal-500,
html.dark .text-teal-600,
html.dark .text-teal-700,
html.dark .text-teal-800 { color:var(--teal) !important; }
html.dark .text-emerald-500,
html.dark .text-emerald-600,
html.dark .text-emerald-700,
html.dark .text-green-600,
html.dark .text-green-700 { color:var(--ok) !important; }
html.dark .bg-teal-500,
html.dark .bg-teal-600,
html.dark .bg-teal-700 { background-color:var(--teal) !important; }
html.dark .bg-emerald-500,
html.dark .bg-emerald-600,
html.dark .bg-emerald-700,
html.dark .bg-green-500,
html.dark .bg-green-600 { background-color:var(--ok) !important; }
html.dark .bg-teal-50,
html.dark .bg-teal-100 { background-color:var(--med-soft) !important; }
html.dark .bg-emerald-50,
html.dark .bg-emerald-100,
html.dark .bg-green-50 { background-color:var(--ok-bg) !important; }
html.dark .border-teal-100,
html.dark .border-teal-200,
html.dark .border-teal-400,
html.dark .border-teal-500 { border-color:var(--teal) !important; }
html.dark .border-emerald-100,
html.dark .border-emerald-200,
html.dark .border-emerald-500 { border-color:var(--ok) !important; }
html.dark .ring-teal-100,
html.dark .ring-teal-500 { --tw-ring-color:var(--teal) !important; }
html.dark .ring-emerald-500 { --tw-ring-color:var(--ok) !important; }
/* Los campos se separan del panel por un único escalón de superficie. */
html.dark input,
html.dark textarea,
html.dark select { background-color:var(--surface-2) !important; color:var(--ink) !important; border-color:var(--line) !important; }
html.dark ::placeholder { color:var(--muted-2) !important; }
/* Los banners heredados usan luz sobre superficie para evitar manchas de azul saturado. */
html.dark [style*="linear-gradient"][style*="0f766e"],
html.dark [style*="linear-gradient"][style*="0d9488"],
html.dark [style*="linear-gradient"][style*="14b8a6"],
html.dark [style*="linear-gradient"][style*="064e3b"],
html.dark [style*="linear-gradient"][style*="10b981"],
html.dark [style*="linear-gradient"][style*="059669"],
html.dark [style*="linear-gradient"][style*="34d399"] {
    background-image: var(--header-halo), var(--panel-light) !important;
    background-color:var(--surface) !important;
}
html.dark .from-teal-500,
html.dark .from-teal-600 { --tw-gradient-from:var(--accent) !important; }
html.dark .from-emerald-500,
html.dark .from-emerald-600 { --tw-gradient-from:var(--ok) !important; }
html.dark .to-teal-500,
html.dark .to-teal-600 { --tw-gradient-to:var(--accent-strong) !important; }
html.dark .to-emerald-300,
html.dark .to-emerald-500,
html.dark .to-emerald-600 { --tw-gradient-to:var(--ok) !important; }
html.dark .via-teal-900 { --tw-gradient-via:var(--accent) !important; --tw-gradient-stops:var(--tw-gradient-from), var(--accent), var(--tw-gradient-to) !important; }
html.dark .via-emerald-400 { --tw-gradient-via:var(--ok) !important; --tw-gradient-stops:var(--tw-gradient-from), var(--ok), var(--tw-gradient-to) !important; }
html.dark .from-teal-50,
html.dark .from-teal-100 { --tw-gradient-from:var(--med-soft) !important; }
html.dark .from-emerald-50 { --tw-gradient-from:var(--ok-bg) !important; }
html.dark .to-teal-50,
html.dark .to-teal-100,
html.dark .to-sky-50 { --tw-gradient-to:var(--surface) !important; }
html.dark .to-emerald-50,
html.dark .to-emerald-100 { --tw-gradient-to:var(--surface) !important; }
/* Se conservan los parches inline hasta que la siguiente tanda migre ese marcado. */
html.dark #app-topbar { background-color:var(--surface) !important; border-bottom-color:var(--line) !important; }
html.dark .bg-white\/80 { background-color:var(--surface) !important; }
html.dark [style*="background:#fff"],
html.dark [style*="background: #fff"],
html.dark [style*="background:white"],
html.dark [style*="background: white"],
html.dark [style*="background-color:#fff"],
html.dark [style*="background-color: #fff"] {
    background-color:var(--surface) !important;
  }
html.dark [style*="color:#1f1f1f"],
html.dark [style*="color: #1f1f1f"],
html.dark [style*="color:#111"],
html.dark [style*="color: #111"],
html.dark [style*="color:#000"],
html.dark [style*="color: #000"],
html.dark [style*="color:#13283d"],
html.dark [style*="color:#1f2937"],
html.dark [style*="color:#0f172a"],
html.dark [style*="color:#334155"],
html.dark [style*="color:#1e293b"] {
    color:var(--ink) !important;
  }
html.dark .week-dh { background:var(--surface) !important; }
/* Las burbujas se distinguen por profundidad y conservan sus colas. */
html.dark .whatsapp-bg { background-color:var(--bg) !important; }
html.dark .wa-bubble-in { background-color:var(--surface-2) !important; color:var(--ink) !important; }
html.dark .wa-bubble-in::before { border-top-color:var(--surface-2) !important; }
html.dark .wa-bubble-out { background-color:var(--surface-3) !important; color:var(--ink) !important; }
html.dark .wa-bubble-out::before { border-top-color:var(--surface-3) !important; }
/* Los avisos usan tintes suaves; los colores de categoría se vuelven neutros. */
html.dark .bg-amber-100,
html.dark .bg-amber-50,
html.dark .bg-orange-100,
html.dark .bg-orange-50,
html.dark .bg-yellow-50 { background-color:var(--warn-bg) !important; }
html.dark .bg-blue-100,
html.dark .bg-blue-50,
html.dark .bg-indigo-100,
html.dark .bg-indigo-50,
html.dark .bg-sky-100,
html.dark .bg-sky-50 { background-color:var(--accent-soft) !important; }
html.dark .bg-purple-100,
html.dark .bg-purple-50,
html.dark .bg-violet-100,
html.dark .bg-violet-50 { background-color:var(--surface-2) !important; }
html.dark .bg-red-100,
html.dark .bg-red-50,
html.dark .bg-rose-100,
html.dark .bg-rose-50 { background-color:var(--danger-bg) !important; }
html.dark .text-amber-500,
html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900,
html.dark .text-orange-500,
html.dark .text-orange-600,
html.dark .text-orange-700,
html.dark .text-yellow-600 { color:var(--warn) !important; }
html.dark .text-blue-500,
html.dark .text-blue-600,
html.dark .text-blue-700,
html.dark .text-indigo-600,
html.dark .text-indigo-700,
html.dark .text-sky-500,
html.dark .text-sky-600,
html.dark .text-sky-700,
html.dark .text-sky-800,
html.dark .text-sky-900 { color:var(--accent) !important; }
html.dark .text-cyan-700,
html.dark .text-purple-500,
html.dark .text-purple-600,
html.dark .text-purple-700,
html.dark .text-violet-600,
html.dark .text-violet-700 { color:var(--muted) !important; }
html.dark .text-pink-500,
html.dark .text-pink-600,
html.dark .text-pink-700,
html.dark .text-red-600,
html.dark .text-red-700,
html.dark .text-rose-500,
html.dark .text-rose-600,
html.dark .text-rose-700,
html.dark .text-rose-800,
html.dark .text-rose-900 { color:var(--danger) !important; }
html.dark .border-amber-100,
html.dark .border-amber-200 { border-color:color-mix(in srgb, var(--warn) 30%, transparent) !important; }
html.dark .border-blue-200,
html.dark .border-sky-100,
html.dark .border-sky-200 { border-color:color-mix(in srgb, var(--accent) 30%, transparent) !important; }
html.dark .border-pink-200,
html.dark .border-red-100,
html.dark .border-rose-100,
html.dark .border-rose-150,
html.dark .border-rose-200,
html.dark .border-rose-300 { border-color:color-mix(in srgb, var(--danger) 30%, transparent) !important; }
html.dark .from-amber-200,
html.dark .from-amber-400,
html.dark .from-amber-50,
html.dark .from-amber-500 { --tw-gradient-from:var(--warn-bg) var(--tw-gradient-from-position) !important; --tw-gradient-to:transparent var(--tw-gradient-to-position) !important; --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html.dark .from-indigo-500,
html.dark .from-sky-400,
html.dark .from-sky-50,
html.dark .from-sky-500 { --tw-gradient-from:var(--accent-soft) var(--tw-gradient-from-position) !important; --tw-gradient-to:transparent var(--tw-gradient-to-position) !important; --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html.dark .from-pink-500,
html.dark .from-rose-400,
html.dark .from-rose-50 { --tw-gradient-from:var(--danger-bg) var(--tw-gradient-from-position) !important; --tw-gradient-to:transparent var(--tw-gradient-to-position) !important; --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html.dark .from-purple-400,
html.dark .from-purple-50,
html.dark .from-purple-500 { --tw-gradient-from:var(--surface-2) var(--tw-gradient-from-position) !important; --tw-gradient-to:transparent var(--tw-gradient-to-position) !important; --tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to) !important; }
html.dark .to-amber-50,
html.dark .to-amber-600,
html.dark .to-orange-50,
html.dark .to-orange-500 { --tw-gradient-to:var(--warn-bg) var(--tw-gradient-to-position) !important; }
html.dark .to-cyan-500,
html.dark .to-purple-600 { --tw-gradient-to:var(--surface-3) var(--tw-gradient-to-position) !important; }
html.dark .to-indigo-500,
html.dark .to-sky-400,
html.dark .to-sky-50,
html.dark .to-sky-500,
html.dark .to-sky-600,
html.dark .to-sky-700 { --tw-gradient-to:var(--accent-soft) var(--tw-gradient-to-position) !important; }
html.dark .to-rose-500,
html.dark .to-rose-600 { --tw-gradient-to:var(--danger-bg) var(--tw-gradient-to-position) !important; }
html.dark .via-pink-50 { --tw-gradient-stops:var(--tw-gradient-from), var(--danger-bg) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
html.dark .via-sky-50,
html.dark .via-sky-900 { --tw-gradient-stops:var(--tw-gradient-from), var(--accent-soft) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
html.dark #mobile-bottom-nav { background:var(--surface) !important; border-top-color:var(--line) !important; box-shadow:var(--mobile-shadow) !important; }
/* Los diálogos compartidos todavía declaran colores inline y necesitan esta cobertura. */
html.dark .samp-dlg { background:var(--surface) !important; }
html.dark .samp-dlg [style*="#475569"] { color:var(--muted) !important; }
html.dark .samp-dlg [style*="#13283d"] { color:var(--ink) !important; }
html.dark .samp-dlg [style*="background:#f8fafc"] { background:var(--surface-2) !important; border-color:var(--line) !important; }
html.dark #chat-input-normal { background:var(--surface-2) !important; }
html.dark #doctor-reply-input { background:transparent !important; color:var(--ink) !important; }
html.dark [style*="background:#f8faff"],
html.dark [style*="background: #f8faff"] { background-color:var(--surface-2) !important; }
html.dark .bottom-sheet { background: var(--surface) !important; }
html.dark .bottom-sheet .text-slate-700,
html.dark .bottom-sheet .text-slate-800 { color: var(--ink) !important; }
html.dark .text-black\/40 { color: var(--muted-2) !important; }
@media (max-width: 640px) {
html.dark .chips-scroll::after { background: linear-gradient(to right, transparent, var(--bg)); }
}

/* La navegación ancla el conjunto; su gradiente corporativo sigue en claro. */
html.dark #sidebar { background:var(--sidebar-bg) !important; border-color:var(--line-soft) !important; color:var(--muted); }
html.dark #sidebar .nav-item.active { background:var(--surface-3) !important; color:var(--ink) !important; font-weight:560 !important; }
html.dark #sidebar .nav-item:not(.active):hover,
html.dark #sidebar .clinic-row:hover { background:var(--row-hover) !important; }

/* La luz se aplica a contenedores sin convertir controles o insignias en paneles. */
html.dark .bg-white:not(button):not(input):not(select):not(textarea):not(span):not(a),
html.dark .rounded-2xl:not(button):not(input):not(select):not(textarea):not(span):not(a),
html.dark .bg-white\/80,
html.dark #app-topbar,
html.dark .stat-card,
html.dark .lead-card,
html.dark .samp-dlg,
html.dark .bottom-sheet {
  background-image:var(--panel-light) !important;
  box-shadow:var(--panel-shadow) !important;
}
html.dark .rounded-2xl:not(button):not(input):not(select):not(textarea):not(span):not(a),
html.dark .stat-card,
html.dark .lead-card,
html.dark .samp-dlg { border-radius:12px !important; }
html.dark .stat-card:hover,
html.dark .lead-card:hover { box-shadow:var(--panel-shadow) !important; }

/* :has localiza cabeceras existentes sin añadir envoltorios ni alterar el DOM. */
html.dark .section > :is(div,header):has(h1),
html.dark #cal-toolbar,
html.dark #cal-mobile-bar {
  background-image:var(--header-halo), var(--panel-light) !important;
}
html.dark body { font-size:13px; line-height:1.45; letter-spacing:-.008em; }
html.dark h1,
html.dark h2,
html.dark h3,
html.dark .font-black,
html.dark .font-extrabold,
html.dark .font-bold { font-weight:560 !important; letter-spacing:-.008em !important; }
html.dark h1 { color:var(--ink) !important; }
html.dark .font-semibold { font-weight:540 !important; }
html.dark button,
html.dark input,
html.dark select,
html.dark textarea { border-radius:7px !important; }
html.dark .badge,
html.dark .filter-chip,
html.dark .rounded-full { border-radius:999px !important; }
html.dark input:hover,
html.dark textarea:hover,
html.dark select:hover { border-color:var(--line-strong) !important; }
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color:var(--line-strong) !important;
  box-shadow:0 0 0 3px var(--accent-soft) !important;
}
html.dark table th {
  font-size:10.5px !important;
  text-transform:uppercase;
  letter-spacing:.035em !important;
  font-weight:540 !important;
  height:36px;
  color:var(--muted-2) !important;
  background-color:var(--surface-2) !important;
}
html.dark table td { height:45px; color:var(--muted) !important; }
html.dark table tbody tr:hover,
html.dark [role="row"]:hover,
html.dark #patients-table > div:hover,
html.dark #conversations-list > div:hover,
html.dark #collections-list > div:hover,
html.dark #reviews-list > div:hover,
html.dark .svc-row:hover,
html.dark .lead-card:hover,
html.dark li:hover { background-color:var(--row-hover) !important; }

/* La clase de fondo identifica los primarios actuales sin cambiar su acción. */
html.dark :is(button,a,[role="button"]):is(.bg-slate-900,.bg-sky-600,.bg-teal-500,.bg-teal-600,.bg-teal-700,.from-teal-500,.from-teal-600),
html.dark :is(button,a,[role="button"]):is(.bg-slate-900,.bg-sky-600,.bg-teal-500,.bg-teal-600,.bg-teal-700,.from-teal-500,.from-teal-600):hover {
  background:linear-gradient(180deg,var(--primary-top),var(--primary-bottom)) !important;
  color:var(--primary-ink) !important;
  border-color:var(--primary-bottom) !important;
  box-shadow:var(--primary-shadow) !important;
  font-weight:560 !important;
}

/* WebKit permite los 8px exactos; Firefox usa su equivalente fino. */
html.dark,
html.dark * { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }
html.dark::-webkit-scrollbar,
html.dark *::-webkit-scrollbar,
html.dark #sidebar nav::-webkit-scrollbar { width:8px; height:8px; }
html.dark::-webkit-scrollbar-thumb,
html.dark *::-webkit-scrollbar-thumb,
html.dark #sidebar nav::-webkit-scrollbar-thumb {
  background:var(--scroll-thumb);
  border:2px solid transparent;
  background-clip:padding-box;
  border-radius:999px;
}
html.dark::-webkit-scrollbar-track,
html.dark *::-webkit-scrollbar-track { background:transparent; }

/* En Chromium las propiedades estándar prevalecen sobre el pseudo-elemento;
 * se delega en WebKit para conservar los 8px y el borde transparente pedidos. */
@supports selector(::-webkit-scrollbar) {
html.dark,
html.dark * { scrollbar-width:auto; scrollbar-color:auto; }
}

/* Los atajos comparten el primario del tema y evitan halos de color en oscuro. */
html.dark .qbtn-confirm,
html.dark .qbtn-attend,
html.dark .qbtn-confirm:hover,
html.dark .qbtn-attend:hover {
  background:linear-gradient(180deg,var(--primary-top),var(--primary-bottom)) !important;
  color:var(--primary-ink) !important;
  border-color:var(--primary-bottom) !important;
  box-shadow:var(--primary-shadow) !important;
  font-weight:560 !important;
  filter:none !important;
}
html.dark .qbtn-absent,
html.dark .qbtn-cancel {
  background:var(--surface-2) !important;
  border-color:var(--line) !important;
  color:var(--muted) !important;
  box-shadow:none !important;
}
html.dark .qbtn-absent:hover,
html.dark .qbtn-cancel:hover {
  background:var(--surface-3) !important;
  border-color:var(--line) !important;
  color:var(--ink) !important;
  box-shadow:none !important;
}
html.dark .qbtn-cancel:hover { color:var(--danger) !important; }
html.dark .qpill-confirmed {
  background:var(--ok-bg) !important;
  color:var(--ok) !important;
  border-color:color-mix(in srgb, var(--ok) 30%, transparent) !important;
  box-shadow:none !important;
}

/* Esta lista depende de la escritura literal del hex hasta poder migrar el HTML. */
html.dark [style*="background:#f0fdfa"],
html.dark #section-dashboard [style*="background:#ecfdf5"] { background-color:var(--ok-bg) !important; }
html.dark [style*="color:#047857"],
html.dark [style*="color:#0f766e"],
html.dark #section-dashboard [style*="color:#0d9488"],
html.dark #section-dashboard [style*="color:#059669"] { color:var(--ok) !important; }
html.dark #section-dashboard [style*="background:#fffbeb"] { background-color:var(--warn-bg) !important; }
html.dark #section-dashboard [style*="color:#b45309"],
html.dark #section-dashboard [style*="color:#d97706"] { color:var(--warn) !important; }
html.dark #section-dashboard [style*="border:1px solid #ccfbf1"],
html.dark #section-dashboard [style*="border:1px solid #99f6e4"] { border-color:color-mix(in srgb, var(--ok) 30%, transparent) !important; }

/* El feed genera sus chips con una paleta inline, fuera de las clases de Tailwind. */
html.dark #activity-feed [style*="background:#eff6ff"] { background-color:var(--accent-soft) !important; }
html.dark #activity-feed [style*="color:#2563eb"] { color:var(--accent) !important; }
html.dark #activity-feed [style*="background:#fff1f2"] { background-color:var(--danger-bg) !important; }
html.dark #activity-feed [style*="color:#e11d48"],
html.dark #activity-feed [style*="color:#be123c"] { color:var(--danger) !important; }
html.dark #activity-feed [style*="border:1px solid #fecdd3"] { border-color:color-mix(in srgb, var(--danger) 30%, transparent) !important; }
html.dark #activity-feed [style*="background:#f5f3ff"],
html.dark #activity-feed [style*="background:#f1f5f9"] { background-color:var(--surface-2) !important; }
html.dark #activity-feed [style*="color:#7c3aed"],
html.dark #activity-feed [style*="color:#64748b"] { color:var(--muted) !important; }

/* El avatar decorativo del hero no necesita el gradiente cálido del modo claro. */
html.dark #welcome-doctor-avatar {
  background:var(--surface-3) !important;
  color:var(--muted) !important;
  box-shadow:none !important;
}
html.dark .hero-pad [style*="color:#103a5e"] { color:var(--ink) !important; }

/* E-7: las clases propias no pasan por Tailwind. Sus estados conservan el
 * color de claro y reciben aquí superficies y bordes del sistema oscuro. */
html.dark .card-surface { background:var(--surface-2) !important; }
html.dark details.svc-doc[open] > summary { border-bottom-color:var(--line) !important; }
html.dark .skeleton { background:linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%) !important; }
html.dark #emoji-picker button:hover { background:var(--surface-3) !important; }
html.dark .cal-day { border-color:var(--line) !important; }
html.dark .cal-day:hover { background:var(--surface-3) !important; }
html.dark .cal-day.blocked { border-color:var(--line) !important; }
html.dark .progress { background:var(--surface-2) !important; }
html.dark .filter-chip:not(.active):hover { background:var(--surface-3) !important; }
html.dark .nav-item:not(.active):hover { background:var(--surface-3) !important; }
html.dark .cal-view-btn { background:var(--surface-2) !important; }
html.dark .cal-view-btn:hover { background:var(--surface-3) !important; }
html.dark #section-finanzas input:not([type=checkbox]) { background:var(--surface-2) !important; }
html.dark #section-finanzas textarea { background:var(--surface-2) !important; }
html.dark #section-finanzas select { background:var(--surface-2) !important; }
html.dark #section-finanzas input:focus { background:var(--surface-2) !important; }
html.dark #section-finanzas textarea:focus { background:var(--surface-2) !important; }
html.dark #section-finanzas select:focus { background:var(--surface-2) !important; }
html.dark #section-clinic .clinic-tab-panel input:not([type=checkbox]):not([type=radio]) { background:var(--surface-2) !important; }
html.dark #section-clinic .clinic-tab-panel textarea { background:var(--surface-2) !important; }
html.dark #section-clinic .clinic-tab-panel select { background:var(--surface-2) !important; }
html.dark #section-clinic .clinic-tab-panel input:focus { background:var(--surface-2) !important; }
html.dark #section-clinic .clinic-tab-panel textarea:focus { background:var(--surface-2) !important; }
html.dark #section-clinic .clinic-tab-panel select:focus { background:var(--surface-2) !important; }
html.dark .gcal-switch { background:var(--surface-2) !important; }
html.dark .gcal-switch::after { background:var(--ink) !important; }
html.dark #appointment-detail-bubble>.bg-white::before { background:var(--surface-2) !important; }
html.dark .svc-group { border-color:var(--line) !important; }
html.dark .svc-group > summary { background:var(--surface-2) !important; color:var(--ink) !important; }
html.dark .svc-group[open] > summary { border-bottom-color:var(--line) !important; }
html.dark .svc-count { background:var(--surface-2) !important; color:var(--muted) !important; }
html.dark .dent-tab .n { background:var(--surface-2) !important; color:var(--muted) !important; }
html.dark .dv-row:hover { background:var(--surface-3) !important; }
html.dark #loading-overlay { background:var(--surface-2) !important; }
html.dark .chat-ig #chat-header { background:var(--surface-2) !important; color:var(--ink) !important; }
html.dark .chat-ig .whatsapp-bg { background:var(--surface-2) !important; }
html.dark .chat-ig #chat-input-normal { background:var(--surface-2) !important; }
html.dark #section-expediente { background:var(--surface-2) !important; }
html.dark #section-expediente>div { background:var(--surface-2) !important; }
html.dark #patient-detail-content { background:var(--surface-2) !important; }
html.dark #patient-detail-content .flex-1 { background:var(--surface-2) !important; }
html.dark #patient-tab-info>div.bg-white { border-bottom-color:var(--line) !important; }
html.dark #patient-tab-info input:not([type=checkbox]) { background:var(--surface-2) !important; }
html.dark #patient-tab-info textarea { background:var(--surface-2) !important; }
html.dark #patient-tab-info select { background:var(--surface-2) !important; }
html.dark #patient-tab-info input:focus { background:var(--surface-2) !important; }
html.dark #patient-tab-info textarea:focus { background:var(--surface-2) !important; }
html.dark #patient-tab-info select:focus { background:var(--surface-2) !important; }
html.dark #patient-tab-info>div.grid { border-bottom-color:var(--line) !important; }
html.dark #patient-tab-plans .bg-slate-100 { background:var(--surface-2) !important; }
html.dark #create-plan-form-container { background:var(--surface-2) !important; }
html.dark #patient-tab-plans .bg-slate-50 { background:var(--surface-2) !important; }
html.dark #patient-tab-plans input { background:var(--surface-2) !important; }
html.dark #patient-tab-plans textarea { background:var(--surface-2) !important; }
html.dark #patient-tab-plans select { background:var(--surface-2) !important; }
html.dark #patient-tab-plans>div div.bg-white { border-bottom-color:var(--line) !important; }
html.dark #treatment-plans-list>div { border-bottom-color:var(--line) !important; }
html.dark #patient-tab-plans thead tr { background:var(--surface-2) !important; }
html.dark #patient-tab-evolution>div.bg-slate-50 { border-bottom-color:var(--line) !important; }
html.dark #patient-tab-evolution textarea { background:var(--surface-2) !important; }
html.dark #patient-tab-evolution input { background:var(--surface-2) !important; }
html.dark #patient-tab-evolution textarea:focus { background:var(--surface-2) !important; }
html.dark #patient-tab-evolution input:focus { background:var(--surface-2) !important; }
html.dark #evolution-notes-list>div { background:var(--surface-2) !important; }
html.dark #prescription-form-container { background:var(--surface-2) !important; }
html.dark #patient-tab-prescripciones input { background:var(--surface-2) !important; }
html.dark #patient-tab-prescripciones textarea { background:var(--surface-2) !important; }
html.dark #patient-tab-prescripciones select { background:var(--surface-2) !important; }
html.dark #patient-tab-prescripciones input:focus { background:var(--surface-2) !important; }
html.dark #patient-tab-prescripciones textarea:focus { background:var(--surface-2) !important; }
html.dark #patient-tab-prescripciones select:focus { background:var(--surface-2) !important; }
html.dark #prescriptions-list>div { background:var(--surface-2) !important; }
html.dark #patient-tab-odontograma .bg-slate-200\/50 { background:var(--surface-2) !important; }
html.dark #patient-tab-odontograma .bg-slate-100 { background:var(--surface-2) !important; }
html.dark #patient-tab-odontograma .bg-slate-50\/50 { background:var(--surface-2) !important; }
html.dark #patient-tab-odontograma>div.bg-white { border-bottom-color:var(--line) !important; }
html.dark #patient-tab-historia>div.bg-white { border-bottom-color:var(--line) !important; }
html.dark #patient-tab-historia .border-t { border-color:var(--line) !important; }
html.dark #patient-tab-historia input:not([type=checkbox]) { background:var(--surface-2) !important; }
html.dark #patient-tab-historia textarea { background:var(--surface-2) !important; }
html.dark #patient-tab-historia select { background:var(--surface-2) !important; }
html.dark #patient-tab-historia input:focus { background:var(--surface-2) !important; }
html.dark #patient-tab-historia textarea:focus { background:var(--surface-2) !important; }
html.dark #patient-tab-historia select:focus { background:var(--surface-2) !important; }
html.dark #patients-table > div { border-bottom-color:var(--line) !important; }
html.dark #global-search { background:var(--surface-2) !important; color:var(--ink) !important; }
html.dark .search-wrap kbd { background:var(--surface-2) !important; border-color:var(--line) !important; color:var(--muted) !important; }
html.dark .clinic-tab-btn.active { background:var(--surface-2) !important; border-color:var(--line) !important; }
html.dark #welcome-survey-overlay .ws-check::after { background:var(--ink) !important; }

/* La vista elegida es un control secundario, no el primario claro. */
html.dark .cal-view-btn.active { background:var(--surface-3) !important; color:var(--ink) !important; border-color:var(--line-strong) !important; }

/* El blanco translúcido también lava estos secundarios, incluidos sus hovers inline. */
html.dark #btn-importar-pacientes { background:var(--surface-2) !important; color:var(--ink) !important; border-color:var(--line) !important; }
html.dark #btn-importar-pacientes:hover { background:var(--surface-3) !important; }
html.dark #btn-toggle-selection { background:var(--surface-2) !important; color:var(--ink) !important; border-color:var(--line) !important; }
html.dark #btn-toggle-selection:hover { background:var(--surface-3) !important; }
html.dark #btn-patients-trash { background:var(--surface-2) !important; color:var(--ink) !important; border-color:var(--line) !important; }
html.dark #btn-patients-trash:hover { background:var(--surface-3) !important; }

/* Los fondos con opacidad del resumen no tienen utilidades dark compiladas.
 * Solo cambia el soporte: iconos y enlaces retienen su significado semántico. */
html.dark #attention-items > :is(button,div):not(.conf-card) { background:var(--surface-2) !important; border-color:var(--line) !important; }
html.dark #attention-items > button:not(.conf-card):hover { background:var(--surface-3) !important; }

/* Los atributos heredados conservan sus valores de claro. La coincidencia
 * literal cubre HTML y módulos fuera de esta migración; el delimitador evita
 * confundir #fff con un fondo semántico como #fff1f2. */
html.dark [style*="background:#f1f5f9;" i],
html.dark [style*="background: rgb(241, 245, 249);" i],
html.dark [style$="background:#f1f5f9" i] { background-color:var(--surface-2) !important; }
html.dark [style*="background:#f8fafc;" i],
html.dark [style*="background: rgb(248, 250, 252);" i],
html.dark [style$="background:#f8fafc" i] { background-color:var(--surface-2) !important; }
html.dark [style*="border:1px solid #e2e8f0;" i],
html.dark [style*="border: 1px solid rgb(226, 232, 240);" i],
html.dark [style$="border:1px solid #e2e8f0" i] { border-color:var(--line) !important; }
html.dark [style*="border-bottom:1px solid #e2e8f0;" i],
html.dark [style*="border-bottom: 1px solid rgb(226, 232, 240);" i],
html.dark [style$="border-bottom:1px solid #e2e8f0" i] { border-bottom-color:var(--line) !important; }
html.dark [style*="background:#cbd5e1;" i],
html.dark [style*="background: rgb(203, 213, 225);" i],
html.dark [style$="background:#cbd5e1" i] { background-color:var(--surface-2) !important; }
html.dark [style*="border:2px solid #fff;" i],
html.dark [style*="border: 2px solid rgb(255, 255, 255);" i],
html.dark [style$="border:2px solid #fff" i] { border-color:var(--line) !important; }
html.dark [style*="border-top:1px solid #f1f5f9;" i],
html.dark [style*="border-top: 1px solid rgb(241, 245, 249);" i],
html.dark [style$="border-top:1px solid #f1f5f9" i] { border-top-color:var(--line) !important; }
html.dark [style*="border-bottom:1px solid #f1f5f9;" i],
html.dark [style*="border-bottom: 1px solid rgb(241, 245, 249);" i],
html.dark [style$="border-bottom:1px solid #f1f5f9" i] { border-bottom-color:var(--line) !important; }
html.dark [style*="border:1px dashed #cbd5e1;" i],
html.dark [style*="border: 1px dashed rgb(203, 213, 225);" i],
html.dark [style$="border:1px dashed #cbd5e1" i] { border-color:var(--line) !important; }
html.dark [style*="border:1px solid #cbd5e1;" i],
html.dark [style*="border: 1px solid rgb(203, 213, 225);" i],
html.dark [style$="border:1px solid #cbd5e1" i] { border-color:var(--line) !important; }
html.dark [style*="border:1px solid #f1f5f9;" i],
html.dark [style*="border: 1px solid rgb(241, 245, 249);" i],
html.dark [style$="border:1px solid #f1f5f9" i] { border-color:var(--line) !important; }
html.dark [style*="border:1px solid #eef2f7;" i],
html.dark [style*="border: 1px solid rgb(238, 242, 247);" i],
html.dark [style$="border:1px solid #eef2f7" i] { border-color:var(--line) !important; }

/* El indicador conserva la diferencia entre activado y desactivado. */
html.dark .gcal-switch:checked { background:var(--accent) !important; }
html.dark .clinic-tab-btn.active { color:var(--accent) !important; }
/* Al oscurecer una plantilla, su tinta literal necesita el mismo tratamiento.
 * La condición de fondo evita alcanzar la tarjeta de llamadas aprobada. */
html.dark [style*="background:var(--surface-"][style*="color:#475569"] { color:var(--muted) !important; }
html.dark [style*="background:var(--surface-"][style*="color:#64748b"] { color:var(--muted) !important; }
html.dark [style*="background:var(--surface-"][style*="color:#b45309"] { color:var(--warn) !important; }
html.dark [style*="background:var(--surface-"][style*="color:#b91c1c"] { color:var(--danger) !important; }
html.dark .cal-day.blocked { background:repeating-linear-gradient(45deg,var(--surface-2),var(--surface-2) 10px,var(--surface-3) 10px,var(--surface-3) 20px) !important; }

/* El navegador serializa los style modificados con espacios; cubrimos también
 * esa escritura para que el hover no recupere la tinta oscura de claro. */
html.dark [style*="background: var(--surface-"][style*="color: rgb(71, 85, 105)"] { color:var(--muted) !important; }
html.dark [style*="background: var(--surface-"][style*="color: rgb(100, 116, 139)"] { color:var(--muted) !important; }
html.dark [style*="background: var(--surface-"][style*="color: rgb(180, 83, 9)"] { color:var(--warn) !important; }
html.dark [style*="background: var(--surface-"][style*="color: rgb(185, 28, 28)"] { color:var(--danger) !important; }

/* Los ternarios de las plantillas también producen bordes literales. */
html.dark [style*="border:1px dashed #e2e8f0;" i],
html.dark [style$="border:1px dashed #e2e8f0" i],
html.dark [style*="border: 1px dashed rgb(226, 232, 240);" i],
html.dark [style$="border: 1px dashed rgb(226, 232, 240)" i] { border-color:var(--line) !important; }
html.dark [style*="border:2px solid #cbd5e1;" i],
html.dark [style$="border:2px solid #cbd5e1" i],
html.dark [style*="border: 2px solid rgb(203, 213, 225);" i],
html.dark [style$="border: 2px solid rgb(203, 213, 225)" i] { border-color:var(--line) !important; }