/* ============================================================
   tema-escuro.css — camada de ATIVAÇÃO do modo escuro do admin do tutor.

   A paleta escura já vive em design.css (`:root[data-theme="dark"]`), que
   troca os tokens --mp-*. Mas boa parte do app usa ~360 utilitárias Tailwind
   "claras" (bg-white / text-slate-* / border-slate-*) que NÃO leem token.
   Esta folha remapeia SÓ essas classes para os tokens escuros, e SÓ sob
   `[data-theme="dark"]` — então o modo CLARO fica 100% intocado.

   Vence por ESPECIFICIDADE (`[data-theme] + .classe` > `.classe`), sem
   `!important` — as utilitárias Tailwind compiladas não usam !important
   (confere a lição feedback_tailwind_cdn_para_compilado_inverte_cascata:
   nunca resolver cascata Tailwind com !important; usar especificidade).

   Branding PRESERVADO: header teal (bg-[#016464]), CTA âmbar (bg-[#ffab69])
   e as translúcidas bg-white/xx NÃO são tocadas (não casam com .bg-white).
   ============================================================ */

/* Fundo da página — body e #app-screen não têm bg próprio (herdavam branco). */
:root[data-theme="dark"] body,
:root[data-theme="dark"] #app-screen,
:root[data-theme="dark"] #auth-shell { background-color: var(--mp-mesa); }

/* ── superfícies ── */
:root[data-theme="dark"] .bg-white     { background-color: var(--mp-papel); }
:root[data-theme="dark"] .bg-slate-50  { background-color: var(--mp-mesa); }
:root[data-theme="dark"] .bg-slate-100 { background-color: var(--mp-papel-vinco); }
:root[data-theme="dark"] .hover\:bg-slate-100:hover,
:root[data-theme="dark"] .hover\:bg-slate-200:hover { background-color: var(--mp-papel-borda); }

/* ── texto ── */
:root[data-theme="dark"] .text-slate-800,
:root[data-theme="dark"] .text-slate-200 { color: var(--mp-tinta); }
:root[data-theme="dark"] .text-slate-700,
:root[data-theme="dark"] .text-slate-600,
:root[data-theme="dark"] .hover\:text-slate-700:hover,
:root[data-theme="dark"] .hover\:text-slate-600:hover { color: var(--mp-tinta-media); }
:root[data-theme="dark"] .text-slate-500,
:root[data-theme="dark"] .text-slate-400,
:root[data-theme="dark"] .text-gray-400 { color: var(--mp-tinta-fraca); }

/* ── bordas ── */
:root[data-theme="dark"] .border-slate-100 { border-color: var(--mp-papel-vinco); }
:root[data-theme="dark"] .border-slate-200,
:root[data-theme="dark"] .border-slate-300 { border-color: var(--mp-papel-borda); }

/* ── tints/alertas coloridos CLAROS → tokens escuros ──
   (text-*-50/100/200 são texto CLARO sobre cor e botões bg-*-700 são sólidos:
   NÃO tocados — continuam legíveis nos dois temas). */
:root[data-theme="dark"] .bg-amber-50,
:root[data-theme="dark"] .bg-amber-100 { background-color: var(--mp-alerta-bg); }
:root[data-theme="dark"] .text-amber-800,
:root[data-theme="dark"] .text-amber-700 { color: var(--mp-alerta-fg); }
:root[data-theme="dark"] .border-amber-100,
:root[data-theme="dark"] .border-amber-200 { border-color: var(--mp-alerta-borda); }

:root[data-theme="dark"] .bg-red-50   { background-color: var(--mp-vencida-bg); }
:root[data-theme="dark"] .border-red-100 { border-color: var(--mp-vencida-borda); }

:root[data-theme="dark"] .bg-teal-50,
:root[data-theme="dark"] .bg-indigo-50 { background-color: var(--mp-papel-vinco); }
:root[data-theme="dark"] .bg-teal-100,
:root[data-theme="dark"] .bg-teal-200,
:root[data-theme="dark"] .bg-indigo-100 { background-color: var(--mp-papel-borda); }
:root[data-theme="dark"] .border-teal-100,
:root[data-theme="dark"] .border-indigo-100 { border-color: var(--mp-papel-borda); }
:root[data-theme="dark"] .text-teal-700  { color: var(--mp-teal); }
:root[data-theme="dark"] .text-indigo-700 { color: var(--mp-tinta-media); }

/* ════════════════════════════════════════════════════════════════════════════
   MODAIS (2026-08-21) — o ponto cego da validação anterior.

   A varredura que aprovou o tema escuro mediu só as 6 abas ABERTAS. Modal
   fechado nunca foi medido — e por isso passou o pior caso: a CAIXA continuava
   branca (o `background:#fff` de `.modal-box` mora no <style> inline do
   index.html e não lê token) enquanto o texto dentro dela já lia o token claro.
   Caixa branca com letra clara = rótulo e botão invisíveis.

   Medido em produção com os modais forçados a aparecer: 190 reprovados no
   escuro. Vence por ESPECIFICIDADE ([data-theme] + .classe), sem !important,
   como o resto desta folha.
   ════════════════════════════════════════════════════════════════════════════ */

/* a caixa do modal e a do login */
:root[data-theme="dark"] .modal-box,
:root[data-theme="dark"] .dmauth-box { background-color: var(--mp-papel); color: var(--mp-tinta); }
:root[data-theme="dark"] .dmauth-box input,
:root[data-theme="dark"] .dmauth-box select { background-color: var(--mp-papel-vinco); color: var(--mp-tinta); border-color: var(--mp-papel-borda); }

/* tintas pastel usadas como faixa de aviso dentro dos modais — inclusive as
   translúcidas (bg-*-50/50), que não casam com o seletor da versão sólida */
:root[data-theme="dark"] .bg-purple-50,
:root[data-theme="dark"] .bg-violet-50,
:root[data-theme="dark"] .bg-blue-50,
:root[data-theme="dark"] .bg-sky-50,
:root[data-theme="dark"] .bg-emerald-50,
:root[data-theme="dark"] .bg-green-50,
:root[data-theme="dark"] .bg-orange-50,
:root[data-theme="dark"] .bg-yellow-50,
:root[data-theme="dark"] [class*="bg-red-50/"],
:root[data-theme="dark"] [class*="bg-indigo-50/"],
:root[data-theme="dark"] [class*="bg-amber-50/"],
:root[data-theme="dark"] [class*="bg-teal-50/"],
:root[data-theme="dark"] [class*="bg-purple-50/"],
:root[data-theme="dark"] [class*="bg-slate-50/"] { background-color: var(--mp-papel-vinco); }
:root[data-theme="dark"] .border-purple-100,
:root[data-theme="dark"] .border-blue-100,
:root[data-theme="dark"] .border-emerald-100,
:root[data-theme="dark"] .border-green-100,
:root[data-theme="dark"] .border-orange-100,
:root[data-theme="dark"] .border-amber-100 { border-color: var(--mp-papel-borda); }
:root[data-theme="dark"] .text-purple-700,
:root[data-theme="dark"] .text-blue-700,
:root[data-theme="dark"] .text-emerald-700,
:root[data-theme="dark"] .text-green-700,
:root[data-theme="dark"] .text-orange-700 { color: var(--mp-tinta-media); }

/* verde-escuro da marca como ÍCONE/TEXTO sobre superfície escura fica em 3:1.
   Como fundo (header) segue intocado; o que muda é o uso como tinta. */
:root[data-theme="dark"] .text-\[\#016464\] { color: #4ec3b5; }

/* CTA âmbar: a cor é da marca e fica. O texto dentro dela é que precisa ser
   ESCURO — no escuro ele herdava a tinta clara e sumia em cima do âmbar. */
:root[data-theme="dark"] .bg-\[\#ffab69\],
:root[data-theme="dark"] .bg-\[\#ffab69\] * ,
:root[data-theme="dark"] .mp-btn-cta,
:root[data-theme="dark"] .mp-btn-cta * { color: #16242e; }

/* ── legibilidade no escuro (mesma rodada) ─────────────────────────────────
   Medidos os pares que ainda reprovavam DENTRO dos modais.                  */

/* A "tinta fraca" (#6d8090) ficava em 3.55 sobre o vinco — rótulo de apoio e
   ícone de fechar sumiam. Sobe só no escuro; no claro nada muda. */
:root[data-theme="dark"] { --mp-tinta-fraca: #94a6b3; }

/* Botão primário: no escuro o verde da marca clareia (#2b9d9d) e o texto
   branco cai para 3.27. A cor fica; o texto passa a ser escuro (4.84). */
:root[data-theme="dark"] .mp-btn-primario,
:root[data-theme="dark"] .mp-btn-primario * { color: #16242e; }

/* Botões de ação em cor de marca com texto branco (âmbar/laranja): mesma
   regra dos botões de marca da Clínica — a cor fica, o texto escurece. */
:root[data-theme="dark"] .bg-amber-500,
:root[data-theme="dark"] .bg-amber-500 *,
:root[data-theme="dark"] .bg-orange-400,
:root[data-theme="dark"] .bg-orange-400 * { color: #16242e; }

/* Ícones em cor saturada escura sobre superfície escura (2.3 e 2.9). */
:root[data-theme="dark"] .text-indigo-600 { color: #a5b4fc; }
:root[data-theme="dark"] .text-purple-600 { color: #d8b4fe; }
:root[data-theme="dark"] .text-teal-500,
:root[data-theme="dark"] .text-teal-600 { color: #5eead4; }
:root[data-theme="dark"] .text-amber-400 { color: #fcd34d; }

/* Rodapé do site: texto a 40% de opacidade sobre verde escuro fica ilegível. */
:root[data-theme="dark"] .site-footer-bottom,
:root[data-theme="dark"] .site-footer-bottom * { color: rgba(255, 255, 255, .78); }

/* asterisco de campo obrigatório, botão de excluir e o verde sobre superfície
   mais clara — últimos pares medidos abaixo de 4.5 no escuro */
:root[data-theme="dark"] .text-red-500,
:root[data-theme="dark"] .text-red-600 { color: #fca5a5; }
/* botão de excluir: texto BRANCO sobre um vermelho um tom mais fundo (4.83) —
   aqui escurecer o texto piora (o vermelho claro não aceita tinta escura). */
:root[data-theme="dark"] .bg-red-500,
:root[data-theme="dark"] .bg-red-600 { background-color: #dc2626; }
:root[data-theme="dark"] .bg-red-500,
:root[data-theme="dark"] .bg-red-500 *,
:root[data-theme="dark"] .bg-red-600,
:root[data-theme="dark"] .bg-red-600 * { color: #ffffff; }

/* verde da marca como TINTA no escuro: #2b9d9d ficava em 3.64 sobre a
   superfície mais clara. O header usa o verde literal e não é afetado. */
:root[data-theme="dark"] { --mp-teal: #4ec3b5; }
:root[data-theme="dark"] .text-\[\#2b9d9d\],
:root[data-theme="dark"] .mp-btn:not(.mp-btn-primario):not(.mp-btn-cta) { color: #7fd8cf; }

/* ── modal de LOGIN (folha compartilhada auth-modal.css) ───────────────────
   Ele é todo movido a tokens próprios (--dmauth-*). Ao escurecer a caixa, o
   miolo continuava com tinta clara: título, rótulos e links sumiam. Aqui os
   tokens de TINTA e BORDA passam para a paleta escura; o verde de FUNDO do
   botão principal fica como está (branco sobre ele dá 7:1).              */
:root[data-theme="dark"] {
  --dmauth-text: #e8eef2;
  --dmauth-text-light: #94a6b3;
  --dmauth-border: #2a3942;
}
:root[data-theme="dark"] .dmauth-title { color: #a8d3b0; }
:root[data-theme="dark"] .dmauth-link  { color: #8fc79a; }
:root[data-theme="dark"] .dmauth-close { color: #94a6b3; }
:root[data-theme="dark"] .dmauth-close:hover { color: #e8eef2; }
:root[data-theme="dark"] .dmauth-divider,
:root[data-theme="dark"] .dmauth-brand-footer { color: #94a6b3; }
:root[data-theme="dark"] .dmauth-field input,
:root[data-theme="dark"] .dmauth-field select { background-color: #1e2b33; }
:root[data-theme="dark"] .dmauth-btn-google { background-color: #1e2b33; color: #e8eef2; }
:root[data-theme="dark"] .dmauth-btn-google:hover { background-color: #2a3942; }
:root[data-theme="dark"] .dmauth-brand-footer a { color: #8fc79a; }