/* ==========================================================================
   HANGAR MMA — Modo noturno (opção 1b)
   Estratégia: classe `dark` no <html> + sobrescrita das utilities Tailwind
   já usadas nos componentes (não depende de rebuild do Tailwind).
   ========================================================================== */

html.dark {
  color-scheme: dark;
  --hg-bg: #0f172a;
  --hg-surface: #1e293b;
  --hg-surface-2: #243044;
  --hg-border: #334155;
  --hg-text: #f1f5f9;
  --hg-text-2: #cbd5e1;
  --hg-muted: #94a3b8;
  --hg-soft: #0b1220;
}

/* ---------- Superfícies ---------- */
html.dark body { background-color: var(--hg-bg) !important; color: var(--hg-text); }
html.dark :is(.bg-white) { background-color: var(--hg-surface); }
html.dark :is(.bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100, .bg-slate-200) { background-color: var(--hg-soft); }
html.dark :is(.hover\:bg-slate-50, .hover\:bg-slate-100, .hover\:bg-gray-50, .hover\:bg-gray-100, .hover\:bg-white):hover { background-color: var(--hg-surface-2); }
html.dark :is(.bg-white\/60, .bg-white\/80, .bg-white\/90) { background-color: rgba(30, 41, 59, .85); }

/* ---------- Texto ---------- */
html.dark :is(.text-slate-900, .text-slate-800, .text-gray-900, .text-gray-800, .text-black) { color: var(--hg-text); }
html.dark :is(.text-slate-700, .text-slate-600, .text-gray-700, .text-gray-600) { color: var(--hg-text-2); }
html.dark :is(.text-slate-500, .text-slate-400, .text-gray-500, .text-gray-400) { color: var(--hg-muted); }
html.dark :is(.hover\:text-slate-900, .hover\:text-slate-800, .hover\:text-slate-700):hover { color: #fff; }

/* ---------- Bordas ---------- */
html.dark :is(.border-slate-100, .border-slate-200, .border-slate-300, .border-gray-100, .border-gray-200, .border-gray-300) { border-color: var(--hg-border); }
html.dark :is(.divide-slate-100, .divide-slate-200) > :not([hidden]) ~ :not([hidden]) { border-color: var(--hg-border); }
html.dark :is(.ring-slate-100, .ring-slate-200) { --tw-ring-color: var(--hg-border); }

/* ---------- Sombras ---------- */
html.dark .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
html.dark .shadow, html.dark .shadow-md { box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .5); }
html.dark .shadow-lg, html.dark .shadow-xl { box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .65); }

/* ---------- Chips coloridos (fundo claro → translúcido) ---------- */
html.dark .bg-blue-50    { background-color: rgba(59, 130, 246, .15); }
html.dark .bg-blue-100   { background-color: rgba(59, 130, 246, .25); }
html.dark .bg-indigo-50  { background-color: rgba(99, 102, 241, .18); }
html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, .28); }
html.dark .bg-emerald-50, html.dark .bg-green-50 { background-color: rgba(16, 185, 129, .15); }
html.dark .bg-yellow-50, html.dark .bg-amber-50  { background-color: rgba(234, 179, 8, .15); }
html.dark .bg-red-50,    html.dark .bg-rose-50   { background-color: rgba(239, 68, 68, .15); }
html.dark .bg-purple-50, html.dark .bg-violet-50 { background-color: rgba(139, 92, 246, .18); }
html.dark .bg-orange-50  { background-color: rgba(249, 115, 22, .15); }
html.dark .bg-sky-50     { background-color: rgba(14, 165, 233, .15); }

html.dark :is(.text-blue-600, .text-blue-700)       { color: #93c5fd; }
html.dark :is(.text-indigo-600, .text-indigo-700)   { color: #a5b4fc; }
html.dark :is(.text-emerald-600, .text-emerald-700, .text-green-600, .text-green-700) { color: #6ee7b7; }
html.dark :is(.text-yellow-600, .text-yellow-700, .text-amber-600) { color: #fde047; }
html.dark :is(.text-red-600, .text-red-700, .text-rose-600) { color: #fca5a5; }
html.dark :is(.text-purple-600, .text-violet-600)   { color: #c4b5fd; }
html.dark :is(.text-orange-600) { color: #fdba74; }

html.dark :is(.border-blue-100, .border-blue-200)       { border-color: rgba(59, 130, 246, .35); }
html.dark :is(.border-indigo-100, .border-indigo-200)   { border-color: rgba(99, 102, 241, .35); }
html.dark :is(.border-emerald-100, .border-green-100)   { border-color: rgba(16, 185, 129, .35); }
html.dark :is(.border-yellow-100, .border-yellow-200)   { border-color: rgba(234, 179, 8, .35); }
html.dark :is(.border-red-100, .border-red-200)         { border-color: rgba(239, 68, 68, .35); }
html.dark :is(.hover\:border-blue-100, .hover\:border-blue-200):hover { border-color: rgba(59, 130, 246, .6); }

/* Botão CTA "Controle de Estudos" (bg-slate-50 + hover azul continua funcionando) */
html.dark .group:hover .group-hover\:bg-blue-600 { background-color: #2563eb; }

/* ---------- Libs de terceiros ---------- */
html.dark .driver-popover.hangar-theme { background: var(--hg-surface); border-color: var(--hg-border); }
html.dark .driver-popover.hangar-theme .driver-popover-description { color: var(--hg-text-2); }
html.dark .driver-popover.hangar-theme .driver-popover-prev-btn { background: var(--hg-border); color: var(--hg-text); }
html.dark .driver-popover.hangar-theme .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--hg-surface); }
html.dark .driver-popover.hangar-theme .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--hg-surface); }
html.dark .driver-popover.hangar-theme .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--hg-surface); }
html.dark .driver-popover.hangar-theme .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--hg-surface); }
html.dark .swal2-popup { background: var(--hg-surface); color: var(--hg-text); }
html.dark .swal2-html-container, html.dark .swal2-title { color: var(--hg-text); }

/* ==========================================================================
   BOTÃO SOL ↔ LUA
   ========================================================================== */
.hg-theme-wrap { display: inline-flex; align-items: center; gap: 8px; }

/* Switch deslizante (opção A) — montado só no #hg-theme-slot do menu.
   O knob segue aria-checked (desliza no clique, antes da revelação circular). */
.hg-switch {
  position: relative; flex: none; width: 58px; height: 30px; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid #e2e8f0; background: #f1f5f9; -webkit-tap-highlight-color: transparent;
  transition: background-color .35s, border-color .35s;
}
.hg-switch:hover { border-color: #c7d2fe; }
.hg-switch:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
html.dark .hg-switch { background: #0b1220; border-color: var(--hg-border); }
html.dark .hg-switch:hover { border-color: #6366f1; }

.hg-sw-ico { position: absolute; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; display: block; color: #94a3b8; pointer-events: none; }
.hg-switch svg, .hg-auto-chip svg, .hg-ask svg { display: block; width: 100%; height: 100%; }
.hg-sw-sun  { left: 8px; }
.hg-sw-moon { right: 8px; }

.hg-sw-knob {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
  display: grid; place-items: center; font-size: 14px; pointer-events: none;
  transition: transform .35s cubic-bezier(.3, 1.3, .5, 1), background-color .35s;
}
.hg-sw-knob > span { position: absolute; width: 14px; height: 14px; transition: opacity .25s, transform .35s; }
.hg-k-sun  { color: #d97706; }
.hg-k-moon { color: #fde68a; opacity: 0; transform: rotate(-90deg) scale(.5); }
.hg-switch[aria-checked="true"] .hg-sw-knob { transform: translateX(28px); background: #334155; box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.hg-switch[aria-checked="true"] .hg-k-sun  { opacity: 0; transform: rotate(90deg) scale(.5); }
.hg-switch[aria-checked="true"] .hg-k-moon { opacity: 1; transform: none; }

.hg-auto-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px;
  background: #eef2ff; color: #4338ca; font-size: 10px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
}
.hg-auto-chip[hidden] { display: none; }
html.dark .hg-auto-chip { background: #312e81; color: #c7d2fe; }
@media (max-width: 640px) { .hg-auto-chip span { display: none; } }

/* ==========================================================================
   TRANSIÇÃO RADIAL
   ========================================================================== */
/* View Transitions API (Chrome/Edge/Safari 18+) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 9999; }

/* Fallback (Firefox etc.): camada com a cor antiga encolhe a partir do botão */
.hg-reveal {
  position: fixed; inset: 0; z-index: 99999; pointer-events: none;
  clip-path: circle(var(--r) at var(--x) var(--y));
  transition: clip-path .7s cubic-bezier(.4, 0, .2, 1);
}
.hg-reveal.go { clip-path: circle(0px at var(--x) var(--y)); }

/* Troca automática (relógio/sistema): fade suave em vez de círculo */
html.hg-fading, html.hg-fading * { transition: background-color .4s, color .4s, border-color .4s !important; }

@media (prefers-reduced-motion: reduce) {
  .hg-sw-knob, .hg-sw-knob > span, .hg-reveal, html.hg-fading * { transition: none !important; }
}

/* ==========================================================================
   POPOVER "Ativar automaticamente à noite?"
   ========================================================================== */
.hg-ask {
  position: fixed; z-index: 9500; width: 280px; max-width: calc(100vw - 24px);
  background: #fff; color: #1e293b; border: 1px solid #e2e8f0; border-radius: 14px; padding: 14px;
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .25s, transform .25s;
  font-family: inherit;
}
.hg-ask.show { opacity: 1; transform: none; }
html.dark .hg-ask { background: var(--hg-surface); color: var(--hg-text); border-color: var(--hg-border); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .7); }
.hg-ask-title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; }
.hg-ask-title svg { color: #6366f1; width: 16px; height: 16px; flex: none; }
.hg-ask-sys svg { width: 13px; height: 13px; flex: none; }
.hg-auto-chip svg { width: 11px; height: 11px; flex: none; }
.hg-ask p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: #64748b; }
html.dark .hg-ask p { color: var(--hg-muted); }
.hg-ask-row { display: flex; gap: 8px; margin-top: 12px; }
.hg-ask-row button { flex: 1; height: 38px; border-radius: 9px; font-weight: 700; font-size: 12px; cursor: pointer; font-family: inherit; }
.hg-ask-yes { border: 0; background: #4f46e5; color: #fff; }
.hg-ask-yes:hover { background: #4338ca; }
.hg-ask-no { border: 1px solid #e2e8f0; background: transparent; color: #64748b; }
html.dark .hg-ask-no { border-color: var(--hg-border); color: var(--hg-muted); }
.hg-ask-sys {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 8px;
  border: 0; background: transparent; color: #64748b; font-size: 11px; font-weight: 600; cursor: pointer; border-radius: 8px; font-family: inherit;
}
.hg-ask-sys:hover { background: #f1f5f9; color: #1e293b; }
html.dark .hg-ask-sys { color: var(--hg-muted); }
html.dark .hg-ask-sys:hover { background: var(--hg-surface-2); color: var(--hg-text); }

/* ==========================================================================
   TOAST (troca automática · Desfazer)
   ========================================================================== */
.hg-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 9600;
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  padding: 12px 16px; border-radius: 12px; background: #0f172a; color: #f1f5f9; font-size: 13px; font-weight: 600;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate(-50%, 12px); transition: opacity .3s, transform .3s; font-family: inherit;
}
.hg-toast.show { opacity: 1; transform: translate(-50%, 0); }
html.dark .hg-toast { background: #f1f5f9; color: #0f172a; }
.hg-toast button {
  border: 0; background: transparent; color: #a5b4fc; font-weight: 800; font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 6px; font-family: inherit; white-space: nowrap;
}
html.dark .hg-toast button { color: #4f46e5; }
.hg-toast button:hover { text-decoration: underline; }


/* ==========================================================================
   v2 (30/09/2026) — complementos levantados no painel.php + componentes
   Tudo abaixo é acréscimo; nada do bloco original foi alterado.
   ========================================================================== */

/* ---------- Tokens v2 (painel.php <style id="hangar-tokens">): redefine os --hg-* claros
   usados em style="…" e nas classes hg-*. --hg-white e --hg-ink NÃO mudam
   (texto de botão / fundo do painel navy). ---------- */
html.dark {
  --hg-slate-50:  var(--hg-soft);
  --hg-slate-100: var(--hg-surface-2);
  --hg-slate-200: var(--hg-border);
  --hg-slate-500: var(--hg-muted);
  --hg-slate-700: var(--hg-text-2);
  --hg-slate-800: var(--hg-text);
  --hg-brand-50:  rgba(59, 130, 246, .15);
  --hg-brand-100: rgba(59, 130, 246, .35);
  --hg-brand-900: #bfdbfe;
  --hg-brass-50:  rgba(217, 169, 63, .14);
  --hg-brass-600: #e3c169;
  --hg-brass-800: #f1d99a;
  --hg-warning: #f87171;  --hg-warning-bg: rgba(239, 68, 68, .15);
  --hg-caution: #fbbf24;  --hg-caution-bg: rgba(234, 179, 8, .15);
  --hg-normal:  #34d399;  --hg-normal-bg:  rgba(16, 185, 129, .15);
}
html.dark .hg-card { background: var(--hg-surface); }
html.dark .hg-card--locked { background: var(--hg-soft); }
html.dark .hg-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }
html.dark .hg-panel { border-color: var(--hg-border); }              /* navy continua; só não se funde no fundo */
html.dark .hg-panel .hg-btn--primary:hover { background: #e2e8f0; }  /* hover herdaria slate-100 escuro com texto ink */

/* ---------- Chips bg-*-100 e fundos translúcidos ---------- */
html.dark .bg-amber-100   { background-color: rgba(234, 179, 8, .25); }
html.dark .bg-emerald-100 { background-color: rgba(16, 185, 129, .25); }
html.dark .bg-rose-100    { background-color: rgba(239, 68, 68, .25); }
html.dark .bg-sky-100     { background-color: rgba(14, 165, 233, .25); }
html.dark :is(.bg-slate-50\/30, .bg-slate-50\/50) { background-color: rgba(11, 18, 32, .5); }
html.dark .bg-white\/50 { background-color: rgba(255, 255, 255, .12); }

/* ---------- Texto escuro que some no fundo escuro ---------- */
html.dark .text-amber-700 { color: #fde047; }
html.dark .text-rose-700  { color: #fca5a5; }
html.dark .text-sky-700   { color: #7dd3fc; }
/* ícone "apagado" só dentro de superfície clara (em balão bg-slate-900 continua claro) */
html.dark :is(.bg-white, .hg-card) .text-slate-300, html.dark .bg-white.text-slate-300 { color: #475569; }

/* ---------- Hover / group-hover de texto ---------- */
html.dark :is(.hover\:text-indigo-600, .hover\:text-indigo-700, .hover\:text-indigo-800):hover { color: #c7d2fe; }
html.dark :is(.hover\:text-red-700, .hover\:text-red-800):hover { color: #fecaca; }
html.dark .hover\:text-amber-700:hover  { color: #fef08a; }
html.dark .hover\:text-orange-700:hover { color: #fed7aa; }
html.dark .group:hover :is(.group-hover\:text-indigo-600, .group-hover\:text-indigo-700) { color: #a5b4fc; }
html.dark .group:hover .group-hover\:text-blue-700    { color: #93c5fd; }
html.dark .group:hover .group-hover\:text-emerald-700 { color: #6ee7b7; }
html.dark .group:hover .group-hover\:text-amber-700   { color: #fde047; }
html.dark .group:hover .group-hover\:text-rose-600    { color: #fca5a5; }
html.dark .group:hover :is(.group-hover\:text-sky-600, .group-hover\:text-sky-700) { color: #7dd3fc; }

/* ---------- Hover de fundo ---------- */
html.dark :is(.hover\:bg-amber-50, .hover\:bg-amber-100):hover     { background-color: rgba(234, 179, 8, .18); }
html.dark :is(.hover\:bg-emerald-50, .hover\:bg-emerald-100):hover { background-color: rgba(16, 185, 129, .18); }
html.dark :is(.hover\:bg-red-50, .hover\:bg-red-100, .hover\:bg-rose-50):hover { background-color: rgba(239, 68, 68, .18); }
html.dark .hover\:bg-indigo-50:hover  { background-color: rgba(99, 102, 241, .18); }
html.dark .hover\:bg-orange-100:hover { background-color: rgba(249, 115, 22, .22); }
html.dark .hover\:bg-sky-50:hover     { background-color: rgba(14, 165, 233, .18); }
html.dark .group:hover .group-hover\:bg-blue-100 { background-color: rgba(59, 130, 246, .25); }

/* ---------- Bordas e anéis ---------- */
html.dark .border-slate-50   { border-color: rgba(51, 65, 85, .5); }
html.dark .border-amber-100  { border-color: rgba(234, 179, 8, .35); }
html.dark .border-orange-100 { border-color: rgba(249, 115, 22, .35); }
html.dark .hover\:border-amber-100:hover { border-color: rgba(234, 179, 8, .5); }
html.dark :is(.hover\:border-emerald-100, .hover\:border-emerald-200):hover { border-color: rgba(16, 185, 129, .5); }
html.dark .hover\:border-indigo-100:hover { border-color: rgba(99, 102, 241, .5); }
html.dark :is(.hover\:border-red-200, .hover\:border-rose-100):hover { border-color: rgba(239, 68, 68, .5); }
html.dark .hover\:border-sky-100:hover   { border-color: rgba(14, 165, 233, .5); }
html.dark .hover\:border-slate-300:hover { border-color: #475569; }
html.dark .group:hover .group-hover\:border-indigo-200 { border-color: rgba(99, 102, 241, .5); }
html.dark .ring-amber-200 { --tw-ring-color: rgba(234, 179, 8, .4); }
html.dark .ring-white     { --tw-ring-color: var(--hg-surface); }   /* anel dos avatares do ranking */

/* ---------- Barra de rolagem (components/head.php) ---------- */
html.dark ::-webkit-scrollbar-track { background: var(--hg-bg); }
html.dark ::-webkit-scrollbar-thumb { background: var(--hg-border); }

/* ---------- Tour do painel v3 (tour_painel.php) ---------- */
html.dark #tour-tip { background: var(--hg-surface); box-shadow: 0 25px 60px rgba(0, 0, 0, .6); }
html.dark #tour-tip .tt-label { color: #93c5fd; }
html.dark #tour-tip .tt-kbd b { background: var(--hg-surface-2); }
html.dark #tour-spot { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .72), 0 0 0 3px rgba(96, 165, 250, .95); }
html.dark #tour-spot.tt-none { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .72); }

/* ---------- Banners escuros da loja (components/banner.php, modelos 2 e 3) ----------
   bg-slate-900 (#0f172a) = mesma cor do fundo no escuro → contorno para não dissolver.
   Fica no <a data-banner> porque ele tem overflow-hidden (cortaria sombra do filho). */
html.dark a[data-banner]:has(> .bg-slate-900) { box-shadow: 0 0 0 1px var(--hg-border); }
html.dark a[data-banner]:has(> .bg-slate-900):hover { box-shadow: 0 0 0 1px #475569, 0 14px 30px -10px rgba(0, 0, 0, .65); }

/* ==========================================================================
   v3 (30/09/2026) — fazer-prova.php, tour-simulados.php, ver_gabarito.php
   ========================================================================== */

/* ---------- Switch em espaço estreito (coluna lateral do fazer-prova) ---------- */
#hg-theme-slot[data-compact] .hg-auto-chip span { display: none; }

/* ---------- Paleta brand-* (tailwind.config do fazer-prova = azul) ---------- */
html.dark .bg-brand-50  { background-color: rgba(59, 130, 246, .15); }
html.dark .bg-brand-100 { background-color: rgba(59, 130, 246, .25); }
html.dark :is(.text-brand-600, .text-brand-700) { color: #93c5fd; }
html.dark .text-brand-900 { color: #bfdbfe; }
html.dark .border-brand-200 { border-color: rgba(59, 130, 246, .35); }
html.dark .ring-brand-200 { --tw-ring-color: rgba(59, 130, 246, .35); }

/* ---------- Chips e fundos claros extras ---------- */
html.dark .bg-fuchsia-50  { background-color: rgba(217, 70, 239, .15); }
html.dark .bg-lime-100    { background-color: rgba(132, 204, 22, .22); }
html.dark .bg-purple-100  { background-color: rgba(139, 92, 246, .28); }
html.dark .bg-red-100     { background-color: rgba(239, 68, 68, .25); }
html.dark .bg-emerald-100\/80 { background-color: rgba(16, 185, 129, .25); }
html.dark .bg-blue-50\/50   { background-color: rgba(59, 130, 246, .10); }
html.dark .bg-blue-100\/50  { background-color: rgba(59, 130, 246, .18); }
html.dark .bg-indigo-50\/60 { background-color: rgba(99, 102, 241, .14); }
html.dark .bg-slate-300 { background-color: #475569; }

html.dark .text-fuchsia-700 { color: #f0abfc; }
html.dark .text-lime-700    { color: #bef264; }
html.dark .text-purple-700  { color: #c4b5fd; }
html.dark .text-emerald-900 { color: #a7f3d0; }
html.dark .text-red-900     { color: #fecaca; }

html.dark :is(.border-amber-200, .border-amber-300) { border-color: rgba(234, 179, 8, .4); }
html.dark .border-blue-300    { border-color: rgba(59, 130, 246, .45); }
html.dark .border-emerald-200 { border-color: rgba(16, 185, 129, .35); }
html.dark .border-fuchsia-300 { border-color: rgba(217, 70, 239, .4); }
html.dark .border-lime-200    { border-color: rgba(132, 204, 22, .35); }
html.dark :is(.border-purple-100, .border-purple-200) { border-color: rgba(139, 92, 246, .35); }
html.dark .border-slate-200\/60 { border-color: var(--hg-border); }

html.dark .hover\:bg-blue-50:hover    { background-color: rgba(59, 130, 246, .15); }
html.dark .hover\:bg-indigo-100:hover { background-color: rgba(99, 102, 241, .25); }
html.dark :is(.hover\:bg-purple-50, .hover\:bg-violet-50):hover { background-color: rgba(139, 92, 246, .18); }
html.dark .hover\:border-amber-200:hover  { border-color: rgba(234, 179, 8, .5); }
html.dark .hover\:border-blue-300:hover   { border-color: rgba(59, 130, 246, .6); }
html.dark .hover\:border-indigo-300:hover { border-color: rgba(99, 102, 241, .6); }
html.dark .group:hover .group-hover\:border-slate-200 { border-color: var(--hg-border); }
html.dark .hover\:text-blue-600:hover   { color: #93c5fd; }
html.dark .hover\:text-violet-700:hover { color: #ddd6fe; }

html.dark .ring-amber-100 { --tw-ring-color: rgba(234, 179, 8, .3); }
html.dark .ring-blue-200  { --tw-ring-color: rgba(59, 130, 246, .4); }
html.dark :is(.ring-blue-50\/50, .ring-red-50\/50) { --tw-ring-color: rgba(148, 163, 184, .12); }
html.dark .ring-slate-300 { --tw-ring-color: var(--hg-border); }

/* Degradês claros de superfície (não os coloridos de banner/botão) */
html.dark .bg-gradient-to-r.from-slate-50.to-white { background-image: none; background-color: transparent; }
html.dark .bg-gradient-to-br.from-indigo-50.via-white { background-image: linear-gradient(to bottom right, rgba(99, 102, 241, .16), var(--hg-surface) 60%); }

/* ---------- fazer-prova.php ---------- */
html.dark .footer-actions { background: var(--hg-surface); }
html.dark .sl-card { background: var(--hg-surface); box-shadow: 0 25px 70px rgba(0, 0, 0, .6); }
html.dark :is(.sl-title, .sl-step.sl-active) { color: var(--hg-text); }
html.dark .sl-subtitle { color: var(--hg-muted); }
html.dark .sl-progressbar { background: var(--hg-surface-2); }
html.dark .sl-spinner:not(.sl-done) { border-right-color: var(--hg-border); border-bottom-color: var(--hg-border); border-left-color: var(--hg-border); }

/* ---------- tour-simulados.php (mesmo #tour-tip do painel, cores fixas) ---------- */
html.dark #tour-tip .tt-title { color: var(--hg-text); }
html.dark #tour-tip .tt-text  { color: var(--hg-muted); }
html.dark #tour-tip .tt-foot  { background: var(--hg-soft); border-top-color: var(--hg-surface-2); }
html.dark #tour-tip .tt-dots span    { background: var(--hg-border); }
html.dark #tour-tip .tt-dots span.on { background: #3b82f6; }
html.dark #tour-tip .tt-skip { color: var(--hg-muted); }
html.dark #tour-tip .tt-skip:hover { color: var(--hg-text); background: var(--hg-surface-2); }

/* ---------- ver_gabarito.php: explicação (parte das cores vem inline no HTML gerado) ---------- */
html.dark div.explanation-content { color: var(--hg-text-2); }
html.dark :is(.explanation-content strong, .explanation-content b) { color: var(--hg-text); }
html.dark .explanation-content .exp-label { color: var(--hg-text) !important; }
html.dark div.explanation-content p.exp-section { color: var(--hg-text) !important; border-top-color: var(--hg-border) !important; }
html.dark div.explanation-content p.exp-term { color: var(--hg-text-2) !important; }

/* ver_gabarito.php: glossário lateral */
html.dark .glossary-sidebar { background: rgba(30, 41, 59, .98); border-left-color: var(--hg-border); box-shadow: -10px 0 30px rgba(0, 0, 0, .5); }
html.dark .glossary-content { background: var(--hg-bg); }
html.dark .glossary-item { background: var(--hg-surface); border-color: var(--hg-border); }
html.dark .glossary-term { color: var(--hg-text); }
html.dark .glossary-def  { color: var(--hg-text-2); }

/* SweetAlert com HTML de cores inline (ex.: "Refazer este simulado?") */
html.dark .swal2-html-container [style*="color:#475569"] { color: var(--hg-text-2) !important; }
html.dark .swal2-html-container [style*="background:#eff6ff"] { background: rgba(59, 130, 246, .15) !important; border-color: rgba(59, 130, 246, .35) !important; }
html.dark .swal2-html-container [style*="background:#fffbeb"] { background: rgba(234, 179, 8, .15) !important; border-color: rgba(234, 179, 8, .4) !important; }

/* Impressão: a página de gabarito bloqueia impressão com fundo branco — o escuro não interfere */
@media print { html.dark body { background: #fff !important; } }

/* ==========================================================================
   v4 (30/09/2026) — utilitários Tailwind do lote de 16 páginas
   (regras específicas de cada página ficam em inc/dark/<pagina>.css)
   ========================================================================== */
html.dark .bg-green-100   { background-color: rgba(34, 197, 94, .22); }
html.dark .bg-yellow-100  { background-color: rgba(234, 179, 8, .22); }
html.dark .bg-orange-100  { background-color: rgba(249, 115, 22, .22); }
html.dark .bg-violet-100  { background-color: rgba(139, 92, 246, .28); }
html.dark .bg-emerald-50\/60 { background-color: rgba(16, 185, 129, .12); }
html.dark :is(.bg-slate-50\/40, .bg-slate-50\/60, .bg-slate-50\/80) { background-color: rgba(11, 18, 32, .55); }

html.dark .text-blue-800    { color: #bfdbfe; }
html.dark .text-cyan-600    { color: #67e8f9; }
html.dark :is(.text-emerald-800, .text-green-800) { color: #a7f3d0; }
html.dark .text-red-800     { color: #fecaca; }
html.dark .text-yellow-800  { color: #fef08a; }
html.dark .text-orange-700  { color: #fdba74; }
html.dark .text-violet-700  { color: #c4b5fd; }
html.dark .text-sky-900     { color: #bae6fd; }
html.dark .text-sky-950     { color: #e0f2fe; }

html.dark .border-emerald-300 { border-color: rgba(16, 185, 129, .45); }
html.dark .border-green-200   { border-color: rgba(34, 197, 94, .35); }
html.dark .border-slate-200\/70 { border-color: var(--hg-border); }

html.dark .hover\:bg-brand-100:hover { background-color: rgba(59, 130, 246, .25); }
html.dark .hover\:bg-slate-200:hover { background-color: var(--hg-surface-2); }
html.dark .hover\:text-indigo-900:hover { color: #c7d2fe; }

html.dark :is(.ring-slate-200\/60, .ring-slate-200\/70) { --tw-ring-color: var(--hg-border); }
html.dark .ring-brand-50\/50 { --tw-ring-color: rgba(148, 163, 184, .12); }
html.dark .ring-amber-100\/70   { --tw-ring-color: rgba(234, 179, 8, .3); }
html.dark .ring-emerald-100\/70 { --tw-ring-color: rgba(16, 185, 129, .3); }
html.dark .ring-rose-100\/70    { --tw-ring-color: rgba(244, 63, 94, .3); }
html.dark :is(.ring-sky-100\/70, .ring-sky-200\/70) { --tw-ring-color: rgba(14, 165, 233, .35); }
html.dark .ring-violet-100\/70  { --tw-ring-color: rgba(139, 92, 246, .3); }

/* Degradês claros de superfície do lote (novo-grafico-desempenho) */
html.dark .bg-gradient-to-b.from-white { background-image: none; background-color: transparent; }
html.dark .bg-gradient-to-br.from-sky-50 { background-image: linear-gradient(to bottom right, rgba(14, 165, 233, .14), rgba(99, 102, 241, .14)); }

/* Páginas com o bootstrap.css do template: ele força .bg-white com !important (menu, rodapé, cards).
   Mesmo seletor com !important e especificidade maior → o escuro vence. */
html.dark .bg-white { background-color: var(--hg-surface) !important; }

/* Menu público (inc/menu.php, RD Navbar do template): switch ao lado do ícone social */
.rd-navbar-element #hg-theme-slot:not(:empty) { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 14px; }

/* Páginas com Bootstrap 5.3 (data-bs-theme sincronizado com .dark): tema escuro nativo do Bootstrap
   alinhado à paleta do site (azul-marinho), em vez do cinza #212529 padrão dele. */
html.dark[data-bs-theme="dark"] {
  --bs-body-bg: #0f172a;       --bs-body-bg-rgb: 15, 23, 42;
  --bs-body-color: #f1f5f9;    --bs-body-color-rgb: 241, 245, 249;
  --bs-emphasis-color: #fff;   --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: #94a3b8; --bs-secondary-color-rgb: 148, 163, 184;
  --bs-secondary-bg: #243044;  --bs-secondary-bg-rgb: 36, 48, 68;
  --bs-tertiary-bg: #1e293b;   --bs-tertiary-bg-rgb: 30, 41, 59;
  --bs-border-color: #334155;  --bs-border-color-translucent: rgba(255, 255, 255, .12);
}
/* .bg-light do Bootstrap é !important e não muda com data-bs-theme */
html.dark[data-bs-theme="dark"] .bg-light { background-color: var(--hg-surface-2) !important; }
/* .text-dark do Bootstrap (4 e 5.3) força preto com !important e não muda com o tema */
html.dark .text-dark { color: var(--hg-text) !important; }

/* Logo no escuro: versão clara já no 1º paint (Chrome/Edge/Safari). O JS troca o src em todos os navegadores. */
html.dark img[src$="images/logo.png"] { content: url(/images/logo_noturno.png); }

/* Divisor (opção B): ponto de 4px entre o menu e o switch. Só em menu horizontal (≥1280px, onde o SAIR aparece)
   e fora dos cabeçalhos próprios (slots data-compact: fazer-prova, controle-estudos, trilha, vitrine, simulado). */
@media (min-width: 1280px) {
  #hg-theme-slot:not([data-compact]) .hg-theme-wrap::before {
    content: ''; flex: none; width: 4px; height: 4px; margin-right: 4px; border-radius: 50%; background: #cbd5e1;
  }
  html.dark #hg-theme-slot:not([data-compact]) .hg-theme-wrap::before { background: #475569; }
}

/* Menu do download-anac (classes .mn-*, só existem lá): o switch vai para a borda direita da barra, fora do
   container de 80rem; o container recua à direita só o necessário (telas largas: nada) e os itens não quebram linha. */
@media (min-width: 1280px) {
  #menu-principal:has(#hg-theme-btn) .mn-caixa #hg-theme-slot { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }
  #menu-principal:has(#hg-theme-btn) .mn-caixa { padding-right: max(16px, calc(118px - (100vw - 80rem) / 2)); }
  #menu-principal:has(#hg-theme-btn) .mn-links { gap: 20px; white-space: nowrap; }
}
@media (min-width: 1280px) and (max-width: 1365px) {
  #menu-principal:has(#hg-theme-btn) .mn-links { gap: 16px; }
}