/* ==========================================================================
   HANGAR MMA — Modo noturno · download-anac/index.php
   30/09/2026 — carregar DEPOIS de assets/menu.css, site.css, banner.css e do
   hangar-dark.css.

   Três folhas próprias, sem Tailwind:
   - site.css   → tokens em :root (--fundo, --cartao, --tinta…). Superfícies e
                  textos redefinidos; o roxo --acento (#6D28D9) NÃO muda, porque
                  é fundo sólido com texto branco (.baixar:hover, .pular,
                  borda da aba/árvore ativa). Os usos dele como TEXTO sobre
                  fundo escuro ganham um lilás claro em regra própria.
   - menu.css   → tokens --mn-* em #menu-principal/#mn-gaveta. Os índigos
                  600/700 são texto E fundo sólido: o token vira o tom claro
                  (texto) e os botões sólidos voltam ao índigo por regra.
   - banner.css → utilitários presos a #banner-loja (especificidade de id; o
                  hangar-dark.css não alcança). Replicado aqui o mesmo efeito
                  que o painel já tem: cartão claro (modelos 1, 4, 5) vira
                  superfície escura; arte, laranja e CTA não mudam.
   Paleta: a do site (slate do hangar-dark.css), para casar com o menu.
   ========================================================================== */

/* ---------- site.css: tokens de superfície e texto ---------- */
html.dark {
  --fundo: var(--hg-bg);
  --cartao: var(--hg-surface);
  --lateral: #1a2435;                     /* entre o fundo e o cartão, como no claro */
  --borda: var(--hg-border);
  --borda-fraca: #2a3649;                 /* usada como fundo de selo E como divisória */
  --tinta: var(--hg-text);
  --tinta-2: var(--hg-text);
  --tinta-3: var(--hg-text-2);
  --apagado: var(--hg-muted);
  --tenue: #8b98ab;
  --acento-suave: rgba(139, 92, 246, .16);
  --acento-ativo: rgba(139, 92, 246, .20);
  --marca-fundo: rgba(167, 139, 250, .32);
  --marca-tinta: #ede9fe;
  --sombra: 0 0 0 1px var(--hg-border), 0 20px 50px rgba(0, 0, 0, .45);
}

/* ---------- Roxo de acento usado como TEXTO → lilás legível no escuro ---------- */
html.dark .baixar,
html.dark .btn-vazio,
html.dark .aba.ativa .pilula.peq,
html.dark .linha:hover .linha-icone { color: #c4b5fd; }
html.dark .baixar:hover, html.dark .baixar:focus-visible,
html.dark .btn-vazio:hover { color: #fff; }               /* fundo sólido --acento do original */
html.dark .trilha a:hover, html.dark .rodape a:hover { color: #c4b5fd; }
html.dark :where(a, button, input, summary, [tabindex]):focus-visible { outline-color: #a78bfa; }

/* ---------- Selo "downloads feitos" (05/10/2026) ---------- */
html.dark .selo-dl-ico,
html.dark .selo-dl-num { color: #c4b5fd; }
html.dark .selo-dl-sep { color: #475569; }
html.dark .selo-dl-ponto,
html.dark .selo-dl-ponto::after { background: #22c55e; }

/* ---------- Busca ---------- */
html.dark .busca { border-color: var(--hg-border); }
html.dark .busca:focus-within { background: var(--hg-soft); box-shadow: 0 0 0 3px rgba(139, 92, 246, .25); }
html.dark .busca input::placeholder { color: var(--hg-muted); }
html.dark .busca kbd { border-color: var(--hg-border); }

/* ---------- Navegação lateral (árvore) ---------- */
html.dark .arv-sub { border-left-color: var(--hg-border); }
html.dark .arv-a:hover { background: var(--hg-surface-2); }
html.dark .arv-a.ativo { color: var(--hg-text); }
html.dark .arv-a.ativo .cont { color: var(--hg-text-2); }

/* ---------- Trilha, chip de filtro, pílulas e abas ---------- */
html.dark .trilha .sep { color: #64748b; }
html.dark .chip { background: var(--hg-surface-2); color: var(--hg-text); }
html.dark .chip a { background: var(--hg-border); color: var(--hg-text-2); }
html.dark .chip a:hover { background: #6B5F8C; color: #fff; }
html.dark .pilula { background: var(--hg-surface-2); }
html.dark .pilula.peq { color: var(--hg-muted); background: var(--hg-soft); }
html.dark .aba:hover, html.dark .aba.ativa { color: var(--hg-text); }

/* ---------- Lista de arquivos (zebra/hover) ---------- */
html.dark .linha:hover { background: var(--hg-surface-2); }
html.dark .linha-rot:not(:last-child)::after { color: #475569; }

/* ---------- Estado vazio ---------- */
html.dark .vazio-icone { background: var(--hg-soft); }

/* ---------- Celular: acordeão da navegação e sombra do cartão ---------- */
@media (max-width: 760px) {
  html.dark .cartao { box-shadow: 0 0 0 1px var(--hg-border), 0 8px 24px rgba(0, 0, 0, .4); }
  html.dark .nav-movel > summary { background: var(--hg-surface-2); color: var(--hg-text); }
}

/* ---------- menu.css: tokens --mn-* (barra fixa e gaveta) ---------- */
html.dark #menu-principal,
html.dark #mn-gaveta {
  --mn-branco: var(--hg-surface);
  --mn-slate-50: var(--hg-soft);
  --mn-slate-100: var(--hg-surface-2);
  --mn-slate-200: var(--hg-border);
  --mn-slate-400: var(--hg-muted);
  --mn-slate-600: var(--hg-text-2);
  --mn-slate-700: var(--hg-text-2);
  --mn-slate-900: var(--hg-text);
  --mn-indigo-50: rgba(99, 102, 241, .18);
  --mn-indigo-100: rgba(99, 102, 241, .28);
  --mn-indigo-200: rgba(99, 102, 241, .35);
  --mn-indigo-600: #a5b4fc;               /* texto: links em hover, + CRÉDITOS */
  --mn-indigo-700: #c7d2fe;               /* texto: item atual, avatar */
  --mn-red-50: rgba(239, 68, 68, .15);
  --mn-red-500: #f87171;
  --mn-red-700: #fca5a5;
}
/* Botões sólidos que liam os índigos como FUNDO: voltam à cor original */
html.dark .mn-avatar-cheio { background: #4F46E5; border-color: #4F46E5; }
html.dark .mn-entrar, html.dark .mn-entrar-movel { background: #4F46E5; }
html.dark .mn-entrar:hover { background: #4338CA; }
html.dark .mn-entrar-movel:hover { background: #4338CA !important; }   /* original tem !important */
html.dark .mn-painel { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .7); }

/* ---------- banner.css: cartão claro (modelos 1, 4 e 5) → superfície escura ---------- */
html.dark #banner-loja,
html.dark #banner-loja * { border-color: var(--hg-border); }  /* reset local pinta toda borda de #e2e8f0 */
html.dark #banner-loja .bg-white { background-color: var(--hg-surface); }
html.dark #banner-loja .bg-slate-100 { background-color: var(--hg-soft); }
html.dark #banner-loja .border-slate-200,
html.dark #banner-loja .border-slate-300 { border-color: var(--hg-border); }
html.dark #banner-loja .text-slate-800 { color: var(--hg-text); }
html.dark #banner-loja .text-slate-500 { color: var(--hg-muted); }
/* Chips pastel laranja (tags de matéria, selo "Oficial") */
html.dark #banner-loja .bg-orange-50 { background-color: rgba(249, 115, 22, .15); }
html.dark #banner-loja .border-orange-200 { border-color: rgba(249, 115, 22, .35); }
html.dark #banner-loja .text-orange-700 { color: #fdba74; }
/* Faixa laranja do topo do modelo 4 (vem depois do reset de borda acima) */
html.dark #banner-loja .border-t-orange-500 { border-top-color: #f97316; }
html.dark #banner-loja .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
/* Hover do cartão: sombra escura; modelos escuros (2 e 3) mantêm o contorno do hangar-dark.css */
html.dark #banner-loja .hover\:shadow-xl.hover\:shadow-slate-900\/10:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .5), 0 8px 10px -6px rgba(0, 0, 0, .5); }
html.dark #banner-loja a[data-banner]:has(> .bg-slate-900):hover { box-shadow: 0 0 0 1px #475569, 0 14px 30px -10px rgba(0, 0, 0, .65); }