/* ==============================
   TEMAS — requisicoes_ifsc_gpb
   ==============================

   CAMADAS DE TOKEN
   ----------------
   1. MARCA (uso gráfico):  --primary, --primary-dark, --primary-light
      Fundos decorativos, bordas e ícones SEM texto por cima. Aqui basta 3:1.

   2. COM TEXTO (acessíveis): --primary-strong, --primary-hover,
                              --primary-ink, --on-primary
      Sempre que houver texto por cima da cor, ou texto NA cor.
      Todos verificados >= 4,5:1 (WCAG 2.1 AA) nos três temas.

   REGRA: nunca use --primary como fundo de algo com texto em cima —
   #1CBB9B com branco dá 2,43:1 e #32a041 dá 3,37:1; ambos reprovam.
   Use --primary-strong + --on-primary.
   ============================== */

:root {
  /* marca — uso GRÁFICO (fundos decorativos, bordas, ícones sem texto em cima) */
  --primary:        #1CBB9B;
  --primary-dark:   #169C80;
  --primary-light:  #ccfaf2;

  /* marca — uso com TEXTO (garantem WCAG AA 4.5:1). Ver nota no topo do arquivo. */
  --primary-strong: #12836b;   /* fundo de botão; branco em cima = 4,68:1 */
  --primary-hover:  #0f7862;   /* hover do botão                  = 5,41:1 */
  --primary-ink:    #0f7862;   /* texto/link colorido sobre claro = 5,41:1 */
  --primary-deep:   #0a5747;   /* extremo escuro do gradiente do header */
  --on-primary:     #ffffff;   /* cor do texto sobre --primary-strong */

  /* extremos do gradiente do header/hero — por padrão espelham strong/deep (sem mudança
     visual); o tema IFSC redefine com um verde mais claro/quente, ver nota lá embaixo. */
  --header-1:      var(--primary-strong);
  --header-2:      var(--primary-deep);

  --danger:        #dc2626;
  --bg:            #F2F4F8;
  --surface:       #ffffff;
  --surface-2:     #f9fafb;
  --surface-hover: #f3f4f6;
  --border:        #e5e7eb;
  --text:          #333333;   /* 12,63:1 */
  --text-2:        #576070;   /*  6,07:1 no pior fundo */
  --text-muted:    #6b7280;   /*  4,63:1 no pior fundo */
  --shadow:        0 2px 8px rgba(0,0,0,0.07);
  --focus-ring:    rgba(28,187,155,0.25);

  /* status semânticos (badges/pills) — mesmos tons já usados nos overrides Tailwind
     abaixo, agora disponíveis como variável para qualquer tela (Tailwind ou CSS puro)
     referenciar, em vez de cravar hex. Ver nota de "erradicar tela a tela". */
  --ok:            #166534;  --ok-soft:      #dcfce7;
  --warn:          #92400e;  --warn-soft:    #fef3c7;
  --info:          #1e40af;  --info-soft:    #dbeafe;
  --danger-soft:   #fee2e2;
}

[data-theme="ifsc"] {
  --primary:        #32a041;
  --primary-dark:   #288034;
  --primary-light:  #dcfce7;

  --primary-strong: #288034;   /* verde escuro oficial IFSC; branco = 4,97:1 */
  --primary-hover:  #227a2e;   /*                                    5,40:1 */
  --primary-ink:    #227a2e;   /* texto colorido sobre claro       = 5,40:1 */
  --primary-deep:   #15551d;   /* extremo escuro do gradiente do header */
  --on-primary:     #ffffff;

  /* header mais claro/quente que o resto da marca — pedido do Thiago em 2026-08-26
     comparando com o artefato de referência ("parece mais bonito... quase um dourado
     mas é verde"): mesmos tons de header-1/header-2 do artefato, só no header/hero —
     o resto do tema (botões, badges) continua em --primary-strong/--primary-deep. */
  --header-1:      #3aa94a;
  --header-2:      #268036;

  --danger:        #c8191e;
  --focus-ring:    rgba(50,160,65,0.20);
}

[data-theme="noturno"] {
  /* verde vívido do artefato de referência (redesign-admin-artifact) — pedido do Thiago
     em 2026-08-26: "o artefato usa um verde muito bonito nos detalhes". Trocado o acento
     de teal (#1CBB9B) para este verde; a base (bg/surface/texto) continua slate, como já
     estava — só o "detalhe" (botões, badges, links, foco) mudou. */
  --primary:        #54c463;
  --primary-dark:   #3fa350;
  --primary-light:  #18321e;

  /* no escuro o acento é CLARO: o texto em cima dele precisa ser escuro */
  --primary-strong: #54c463;   /* fundo de botão */
  --primary-hover:  #8fe79f;   /* hover clareia, não escurece */
  --primary-ink:    #8fe79f;   /* texto colorido sobre surface — 9,8:1 */
  --primary-deep:   #124f1d;   /* extremo escuro do gradiente do header */
  --on-primary:     #0a1a0e;   /* escuro sobre #54c463 — 8,1:1 */

  --danger:        #ef4444;
  --bg:            #0f172a;
  --surface:       #1e293b;
  --surface-2:     #263246;
  --surface-hover: #2d3a4f;
  --border:        #334155;
  --text:          #f1f5f9;   /* 13,35:1 */
  --text-2:        #aab7c6;   /*  6,33:1 no pior fundo */
  --text-muted:    #a3afbe;   /*  5,16:1 sobre --surface-2 (antes #909dad: 4,16:1 ali) */
  --shadow:        0 2px 8px rgba(0,0,0,0.35);
  --focus-ring:    rgba(84,196,99,0.30);

  /* status semânticos no escuro — alinhados ao mesmo verde do acento (--ok = --primary,
     como no artefato de referência) e aos demais tons dele (warn/danger/info). */
  --ok:            #54c463;  --ok-soft:      #13311b;
  --warn:          #e0a94a;  --warn-soft:    #3a2c11;
  --info:          #67a9fb;  --info-soft:    #182a45;
  --danger-soft:   #381a1b;
}

/* ==============================
   CLASSES SEMÂNTICAS DE TEMA
   ============================== */

/* Header: gradiente do tom acessível para o mais escuro.
   O extremo MAIS CLARO é --primary-strong (4,68:1 no padrão, 4,97:1 no IFSC),
   então a barra inteira sustenta o texto branco. Antes usava --primary puro,
   que dava 2,43:1 e 3,37:1 — ambos reprovavam WCAG AA. */
.theme-header {
  background-color: var(--primary-strong) !important;
  /* --header-1 entra como realce a partir de ~45% (não em 0%): a marca/logo fica sempre
     sobre --primary-strong, que é o único tom garantido >=4,5:1 com texto branco — o
     verde mais claro do IFSC (#3aa94a, pedido em 2026-08-26 comparando com o artefato de
     referência) dá só 3:1, então não pode ficar embaixo do texto. */
  background-image: linear-gradient(100deg, var(--primary-strong) 0%, var(--header-1) 45%, var(--header-2) 100%) !important;
}

.theme-btn-primary {
  background-color: var(--primary-strong) !important;
  color: var(--on-primary) !important;
}
.theme-btn-primary:hover {
  background-color: var(--primary-hover) !important;
}

.theme-text-primary {
  color: var(--primary-ink) !important;
}

.theme-focus:focus {
  --tw-ring-color: var(--focus-ring) !important;
  border-color: var(--primary) !important;
}

/* Sidebar active state (usa classes brand- do Tailwind) */
[data-theme] .bg-brand-DEFAULT {
  background-color: var(--primary) !important;
}
[data-theme] .bg-brand-DEFAULT\/10 {
  background-color: color-mix(in srgb, var(--primary) 12%, transparent) !important;
}
[data-theme] .text-brand-DEFAULT {
  color: var(--primary) !important;
}

/* ==============================
   TEMA NOTURNO — overrides Tailwind
   ============================== */

[data-theme="noturno"] body,
[data-theme="noturno"] .gradient-bg {
  background-color: var(--bg) !important;
}

/* Superfícies brancas / cards */
[data-theme="noturno"] .bg-white {
  background-color: var(--surface) !important;
}
[data-theme="noturno"] .bg-gray-50 {
  background-color: var(--surface-2) !important;
}
[data-theme="noturno"] .bg-gray-100 {
  background-color: var(--surface-hover) !important;
}

/* Texto */
[data-theme="noturno"] .text-gray-900,
[data-theme="noturno"] .text-gray-800 {
  color: var(--text) !important;
}
[data-theme="noturno"] .text-gray-700,
[data-theme="noturno"] .text-gray-600 {
  color: var(--text-2) !important;
}
[data-theme="noturno"] .text-gray-500,
[data-theme="noturno"] .text-gray-400 {
  color: var(--text-muted) !important;
}

/* Bordas */
[data-theme="noturno"] .border-gray-100,
[data-theme="noturno"] .border-gray-200,
[data-theme="noturno"] .border-gray-50 {
  border-color: var(--border) !important;
}
[data-theme="noturno"] .divide-gray-100 > * + * {
  border-color: var(--border) !important;
}

/* Sombras */
[data-theme="noturno"] .shadow-sm,
[data-theme="noturno"] .shadow-md,
[data-theme="noturno"] .shadow-xl {
  box-shadow: var(--shadow) !important;
}

/* Inputs e formulários */
[data-theme="noturno"] input,
[data-theme="noturno"] select,
[data-theme="noturno"] textarea {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="noturno"] input::placeholder,
[data-theme="noturno"] textarea::placeholder {
  color: var(--text-muted) !important;
}

/* Badges e tags */
[data-theme="noturno"] .bg-gray-100.text-gray-600 {
  background-color: var(--surface-hover) !important;
  color: var(--text-2) !important;
}

/* Background hardcoded do layout admin */
[data-theme="noturno"] .bg-\[\#F2F4F8\] {
  background-color: var(--bg) !important;
}

/* ----------------------------------------------------------------
   dark:* do Tailwind — interceptadas pela STRING DA CLASSE, não por
   .dark ancestral (que nada aplica — darkMode:'class' no
   build/tailwind.config.js, e nada no projeto liga essa classe, ver
   memória cores-noturno-dark-morto). Mesmo truque já usado acima pra
   .bg-\[\#F2F4F8\]: o seletor casa o texto "dark:bg-gray-800" como
   nome de classe comum, sem depender de .dark em lugar nenhum. Lista
   gerada a partir de todo dark:* usado em public/admin + modulos —
   ver a mesma memória se precisar regenerar depois de uma tela nova.
   ---------------------------------------------------------------- */
[data-theme="noturno"] .dark\:bg-gray-700 { background-color: var(--surface-hover) !important; }
[data-theme="noturno"] .dark\:bg-gray-700\/30 { background-color: var(--surface-hover) !important; }
[data-theme="noturno"] .dark\:bg-gray-700\/40 { background-color: var(--surface-hover) !important; }
[data-theme="noturno"] .dark\:bg-gray-700\/50 { background-color: var(--surface-hover) !important; }
[data-theme="noturno"] .dark\:bg-gray-800 { background-color: var(--surface) !important; }
[data-theme="noturno"] .dark\:bg-gray-800\/50 { background-color: var(--surface) !important; }
[data-theme="noturno"] .dark\:bg-gray-900 { background-color: var(--bg) !important; }
[data-theme="noturno"] .dark\:bg-gray-900\/40 { background-color: var(--bg) !important; }
[data-theme="noturno"] .dark\:border-gray-600 { border-color: var(--border) !important; }
[data-theme="noturno"] .dark\:border-gray-700 { border-color: var(--border) !important; }
[data-theme="noturno"] .dark\:border-gray-700\/50 { border-color: var(--border) !important; }
[data-theme="noturno"] .dark\:border-gray-700\/60 { border-color: var(--border) !important; }
[data-theme="noturno"] .dark\:divide-gray-700 > * + * { border-color: var(--border) !important; }
[data-theme="noturno"] .dark\:divide-gray-700\/50 > * + * { border-color: var(--border) !important; }
[data-theme="noturno"] .dark\:text-gray-100 { color: var(--text) !important; }
[data-theme="noturno"] .dark\:text-gray-200 { color: var(--text) !important; }
[data-theme="noturno"] .dark\:text-gray-300 { color: var(--text-2) !important; }
[data-theme="noturno"] .dark\:text-gray-400 { color: var(--text-2) !important; }
[data-theme="noturno"] .dark\:text-gray-500 { color: var(--text-muted) !important; }
[data-theme="noturno"] .dark\:text-gray-600 { color: var(--text-muted) !important; }
[data-theme="noturno"] .dark\:bg-blue-900\/20 { background-color: var(--info-soft) !important; }
[data-theme="noturno"] .dark\:bg-blue-900\/30 { background-color: var(--info-soft) !important; }
[data-theme="noturno"] .dark\:border-blue-800 { border-color: var(--info) !important; }
[data-theme="noturno"] .dark\:text-blue-300 { color: var(--info) !important; }
[data-theme="noturno"] .dark\:bg-green-900\/30 { background-color: var(--ok-soft) !important; }
[data-theme="noturno"] .dark\:text-green-400 { color: var(--ok) !important; }
[data-theme="noturno"] .dark\:bg-sky-900\/40 { background-color: var(--info-soft) !important; }
[data-theme="noturno"] .dark\:text-sky-200 { color: var(--info) !important; }
[data-theme="noturno"] .dark\:bg-\[\#1CBB9B\]\/20 { background-color: color-mix(in srgb, var(--primary) 20%, transparent) !important; }
[data-theme="noturno"] .dark\:text-\[\#1CBB9B\] { color: var(--primary-ink) !important; }
[data-theme="noturno"] .dark\:text-brand-light { color: var(--primary-hover) !important; }
[data-theme="noturno"] .dark\:hover\:bg-blue-900\/30:hover { background-color: var(--info-soft) !important; }
[data-theme="noturno"] .dark\:hover\:bg-gray-700:hover { background-color: var(--surface-hover) !important; }
[data-theme="noturno"] .dark\:hover\:bg-gray-700\/30:hover { background-color: var(--surface-hover) !important; }
[data-theme="noturno"] .dark\:hover\:bg-gray-700\/50:hover { background-color: var(--surface-hover) !important; }
[data-theme="noturno"] .dark\:hover\:bg-gray-800\/60:hover { background-color: var(--surface) !important; }
[data-theme="noturno"] .dark\:hover\:bg-red-900\/30:hover { background-color: var(--danger-soft) !important; }
[data-theme="noturno"] .dark\:hover\:text-gray-200:hover { color: var(--text) !important; }

/* ==============================
   CONTRASTE DOS BOTÕES — vale para TODOS os temas
   ==============================
   50 botões nos PHPs trazem `bg-[#1CBB9B] text-white` no próprio HTML.
   Branco sobre #1CBB9B = 2,43:1 e, no tema IFSC, sobre #32a041 = 3,37:1 —
   ambos reprovam WCAG AA.

   O seletor abaixo casa as duas classes NO MESMO elemento, então só pega
   quem realmente tem texto branco em cima. Os 25 usos decorativos de
   bg-[#1CBB9B] (sem texto) seguem com o verde vivo da marca, intactos.

   Enquanto os hex não saírem dos PHPs (ver camadas de token no topo),
   esta é a correção de menor risco. Ao migrar um arquivo para
   .theme-btn-primary, ele deixa de depender daqui automaticamente.
   ============================== */

[data-theme] .bg-\[\#1CBB9B\].text-white,
[data-theme] .bg-\[\#32a041\].text-white {
  background-color: var(--primary-strong) !important;
  color: var(--on-primary) !important;
}
[data-theme] .bg-\[\#1CBB9B\].text-white.hover\:bg-\[\#169C80\]:hover,
[data-theme] .bg-\[\#1CBB9B\].text-white:hover {
  background-color: var(--primary-hover) !important;
}

/* texto na cor da marca sobre fundo claro: usa a variante legível */
[data-theme] .text-\[\#1CBB9B\],
[data-theme] .text-\[\#32a041\] {
  color: var(--primary-ink) !important;
}

/* ==============================
   IFSC THEME — override cores hardcoded #1CBB9B
   ============================== */

[data-theme="ifsc"] .bg-\[\#1CBB9B\] {
  background-color: var(--primary) !important;
}
[data-theme="ifsc"] .text-\[\#1CBB9B\] {
  color: var(--primary) !important;
}
[data-theme="ifsc"] .border-\[\#1CBB9B\],
[data-theme="ifsc"] .border-\[\#1CBB9B\]\/10,
[data-theme="ifsc"] .border-\[\#1CBB9B\]\/20 {
  border-color: var(--primary) !important;
}
[data-theme="ifsc"] .hover\:bg-\[\#169C80\]:hover,
[data-theme="ifsc"] .hover\:bg-\[\#1CBB9B\]:hover {
  background-color: var(--primary-dark) !important;
}
[data-theme="ifsc"] .hover\:text-\[\#169C80\]:hover {
  color: var(--primary-dark) !important;
}
[data-theme="ifsc"] .hover\:border-\[\#1CBB9B\]:hover {
  border-color: var(--primary) !important;
}
[data-theme="ifsc"] .focus\:ring-\[\#1CBB9B\]:focus {
  --tw-ring-color: var(--primary) !important;
}
[data-theme="ifsc"] .group:focus-within .group-focus-within\:text-\[\#1CBB9B\] {
  color: var(--primary) !important;
}
[data-theme="ifsc"] .type-card.selected,
[data-theme="ifsc"] .type-card:hover {
  border-color: var(--primary) !important;
}

/* ==============================
   NOTURNO — formulário público (.glass, type-card, step dots)
   ============================== */

[data-theme="noturno"] .glass {
  background: var(--surface) !important;
}
[data-theme="noturno"] .type-card {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
}
[data-theme="noturno"] .type-card:hover,
[data-theme="noturno"] .type-card.selected {
  background-color: var(--surface) !important;
}

/* Pontos inativos da barra de progresso */
[data-theme="noturno"] #step-dot-2,
[data-theme="noturno"] #step-dot-3 {
  background-color: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

/* Linha de fundo da barra de progresso */
[data-theme="noturno"] .bg-gray-200 {
  background-color: var(--border) !important;
}

/* Hover states do dark mode */
[data-theme="noturno"] .hover\:bg-gray-50:hover {
  background-color: var(--surface-hover) !important;
}
[data-theme="noturno"] .hover\:bg-gray-100:hover {
  background-color: var(--surface-hover) !important;
}
[data-theme="noturno"] .hover\:text-gray-900:hover {
  color: var(--text) !important;
}

/* Seções de upload/anexo */
[data-theme="noturno"] .border-dashed {
  border-color: var(--border) !important;
}

/* ==============================
   NOTURNO — área administrativa
   ============================== */

/* Header escuro no dark mode */
[data-theme="noturno"] .theme-header {
  background-color: #0f1e1a !important;
  background-image: linear-gradient(100deg, #0f1e1a 0%, var(--primary-deep) 100%) !important;
}

/* bg-gray-50/80 (variante estática) */
[data-theme="noturno"] .bg-gray-50\/80 {
  background-color: var(--surface-2) !important;
}

/* Cabeçalho de tabela (usa bg-gray-50/50 com transparência) */
[data-theme="noturno"] .bg-gray-50\/50 {
  background-color: var(--surface-2) !important;
}

/* Hover de linhas de tabela */
[data-theme="noturno"] .hover\:bg-gray-50\/80:hover {
  background-color: var(--surface-hover) !important;
}

/* Borda gray-300 em formulários admin */
[data-theme="noturno"] .border-gray-300 {
  border-color: var(--border) !important;
}

/* brand-dark = #169C80 → usa primary no dark */
[data-theme="noturno"] .text-brand-dark {
  color: var(--primary) !important;
}

/* brand-light/* → teal semitransparente (ícones, avatares, badges concluído) */
[data-theme="noturno"] .bg-brand-light\/10 {
  background-color: color-mix(in srgb, var(--primary) 15%, transparent) !important;
}
[data-theme="noturno"] .bg-brand-light\/20 {
  background-color: color-mix(in srgb, var(--primary) 22%, transparent) !important;
}
[data-theme="noturno"] .hover\:bg-brand-light\/10:hover {
  background-color: color-mix(in srgb, var(--primary) 15%, transparent) !important;
}
[data-theme="noturno"] .hover\:bg-brand-light\/20:hover {
  background-color: color-mix(in srgb, var(--primary) 22%, transparent) !important;
}

/* Bordas brand no dark */
[data-theme="noturno"] .border-brand-light\/30,
[data-theme="noturno"] .hover\:border-brand-light\/30:hover,
[data-theme="noturno"] .hover\:border-brand-light\/50:hover,
[data-theme="noturno"] .hover\:border-brand-DEFAULT\/50:hover {
  border-color: rgba(28, 187, 155, 0.40) !important;
}

/* ── Badges de status: amarelo ─────────────────── */
[data-theme="noturno"] .bg-yellow-50 {
  background-color: rgba(161, 98, 7, 0.20) !important;
}
[data-theme="noturno"] .bg-yellow-100 {
  background-color: rgba(161, 98, 7, 0.25) !important;
}
[data-theme="noturno"] .text-yellow-600,
[data-theme="noturno"] .text-yellow-700 {
  color: #fbbf24 !important;
}
[data-theme="noturno"] .hover\:text-yellow-700:hover {
  color: #fbbf24 !important;
}
[data-theme="noturno"] .border-yellow-100 {
  border-color: rgba(202, 138, 4, 0.25) !important;
}
[data-theme="noturno"] .border-yellow-200 {
  border-color: rgba(202, 138, 4, 0.35) !important;
}
[data-theme="noturno"] .hover\:bg-yellow-100:hover {
  background-color: rgba(161, 98, 7, 0.25) !important;
}

/* ── Badges de status: azul ────────────────────── */
[data-theme="noturno"] .bg-blue-50,
[data-theme="noturno"] .bg-blue-50\/50 {
  background-color: rgba(37, 99, 235, 0.15) !important;
}
[data-theme="noturno"] .bg-blue-100 {
  background-color: rgba(37, 99, 235, 0.22) !important;
}
[data-theme="noturno"] .border-blue-100 {
  border-color: rgba(37, 99, 235, 0.30) !important;
}
[data-theme="noturno"] .bg-indigo-50 {
  background-color: rgba(79, 70, 229, 0.15) !important;
}
[data-theme="noturno"] .bg-indigo-100 {
  background-color: rgba(79, 70, 229, 0.22) !important;
}
[data-theme="noturno"] .text-blue-700,
[data-theme="noturno"] .text-blue-600,
[data-theme="noturno"] .text-blue-500,
[data-theme="noturno"] .text-blue-400 {
  color: #60a5fa !important;
}
[data-theme="noturno"] .border-blue-100 {
  border-color: rgba(59, 130, 246, 0.30) !important;
}
[data-theme="noturno"] .hover\:bg-blue-50:hover {
  background-color: rgba(37, 99, 235, 0.15) !important;
}
[data-theme="noturno"] .hover\:text-blue-600:hover {
  color: #60a5fa !important;
}

/* ── Badges de status: verde ───────────────────── */
[data-theme="noturno"] .bg-green-50 {
  background-color: rgba(22, 163, 74, 0.15) !important;
}
[data-theme="noturno"] .bg-green-100 {
  background-color: rgba(22, 163, 74, 0.20) !important;
}
[data-theme="noturno"] .bg-green-200 {
  background-color: rgba(74, 222, 128, 0.30) !important;
}
[data-theme="noturno"] .text-green-800,
[data-theme="noturno"] .text-green-700,
[data-theme="noturno"] .text-green-600 {
  color: #4ade80 !important;
}
[data-theme="noturno"] .border-green-100 {
  border-color: rgba(22, 163, 74, 0.25) !important;
}
[data-theme="noturno"] .border-green-200 {
  border-color: rgba(22, 163, 74, 0.30) !important;
}

/* ── Badges de status: vermelho ────────────────── */
[data-theme="noturno"] .bg-red-50 {
  background-color: rgba(220, 38, 38, 0.15) !important;
}
[data-theme="noturno"] .bg-red-100 {
  background-color: rgba(220, 38, 38, 0.20) !important;
}
[data-theme="noturno"] .text-red-700,
[data-theme="noturno"] .text-red-600,
[data-theme="noturno"] .text-red-500,
[data-theme="noturno"] .text-red-400 {
  color: #f87171 !important;
}
[data-theme="noturno"] .hover\:text-red-600:hover,
[data-theme="noturno"] .hover\:text-red-500:hover {
  color: #f87171 !important;
}
[data-theme="noturno"] .border-red-100 {
  border-color: rgba(220, 38, 38, 0.25) !important;
}
[data-theme="noturno"] .border-red-200 {
  border-color: rgba(220, 38, 38, 0.30) !important;
}
[data-theme="noturno"] .hover\:bg-red-50:hover {
  background-color: rgba(220, 38, 38, 0.15) !important;
}

/* Teal com opacidade (request_details) */
[data-theme="noturno"] .bg-\[\#1CBB9B\]\/5 {
  background-color: rgba(28, 187, 155, 0.12) !important;
}
[data-theme="noturno"] .border-\[\#1CBB9B\]\/10 {
  border-color: rgba(28, 187, 155, 0.25) !important;
}

/* Anel branco ao redor dos ícones de timeline */
[data-theme="noturno"] .ring-white {
  --tw-ring-color: var(--surface) !important;
}

/* ==============================
   BOTÕES DE TEMA
   ============================== */

.theme-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
}

.theme-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 3px 5px;
  border-radius: 6px;
  opacity: 0.65;
  transition: opacity 0.15s, background 0.15s;
  line-height: 1;
}
.theme-btn:hover {
  opacity: 1;
  background: rgba(255,255,255,0.15);
}
.theme-btn.active {
  opacity: 1;
  background: rgba(255,255,255,0.25);
}

/* ==========================================================================
   Base comum de UI (2026-09-30)
   Correções sistêmicas da varredura de UI/UX (docs/ux/checklist-ui-ux.md).
   ========================================================================== */

/* Títulos de seção da sidebar do admin (contraste >= 4,5:1, 12px) */
.nav-section {
  color: var(--text-2, #576070);
  font-size: 12px;
  line-height: 1.25;
}
.nav-danger { color: var(--danger, #b91c1c); }
html:not([data-theme="noturno"]) .nav-danger { color: #b91c1c; }
[data-theme="noturno"] .nav-danger { color: #f87171; }

/* Temas claros: cinza-400 e vermelho-500 do Tailwind não passam em 4,5:1 sobre branco */
html:not([data-theme="noturno"]) .text-gray-400 { color: #6b7280; }
html:not([data-theme="noturno"]) .text-red-500 { color: #dc2626; }
html:not([data-theme="noturno"]) input::placeholder,
html:not([data-theme="noturno"]) textarea::placeholder { color: #6b7280; opacity: 1; }

/* Foco visível para teclado (especificidade 0: regras específicas de página vencem) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--primary-strong, #288034);
  outline-offset: 2px;
}

/* Celulares: 16px nos campos evita o zoom automático do iOS */
@media (max-width: 640px) {
  html body input:not([type=checkbox]):not([type=radio]):not([type=range]),
  html body select,
  html body textarea { font-size: 16px; }
}

/* Toque: alvos de 44px só em telas por toque (desktop com mouse não muda) */
@media (pointer: coarse) {
  button, [type=submit], [type=button], [type=reset], select,
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]) {
    min-height: 44px;
  }
  button:has(> svg:only-child) { min-width: 44px; }
}

/* Tamanhos arbitrários minúsculos: piso de 12px */
.text-\[10px\], .text-\[11px\] { font-size: 12px; }

/* Noturno: família amber (avisos) espelha a yellow — antes ficava claro sobre fundo escuro */
[data-theme="noturno"] .bg-amber-50 { background-color: rgba(161, 98, 7, 0.20) !important; }
[data-theme="noturno"] .bg-amber-100 { background-color: rgba(161, 98, 7, 0.25) !important; }
[data-theme="noturno"] .border-amber-200,
[data-theme="noturno"] .border-amber-300 { border-color: rgba(202, 138, 4, 0.35) !important; }
[data-theme="noturno"] .text-amber-700,
[data-theme="noturno"] .text-amber-800,
[data-theme="noturno"] .text-amber-900 { color: #fbbf24 !important; }

/* ==========================================================================
   Onda 1 de UI (2026-10-02) — público e portal
   ========================================================================== */

/* Acento da marca com contraste: o teal antigo (#1CBB9B) com branco dava 2,43:1.
   Fundo de botão usa --primary-strong (+ --on-primary); texto/link usa --primary-ink.
   Só onde há texto branco em cima; fundo decorativo segue o verde vivo (mesma regra do #1CBB9B fixo). */
[data-theme] .bg-brand-DEFAULT.text-white {
  background-color: var(--primary-strong) !important;
  color: var(--on-primary) !important;
}
[data-theme] .bg-brand-DEFAULT.text-white:hover { background-color: var(--primary-hover) !important; }
[data-theme] .text-brand-DEFAULT { color: var(--primary-ink) !important; }

/* Cinza secundário sobre o fundo #F2F4F8: #6b7280 dava 4,39:1 → #5f6775 (5,18:1) */
html:not([data-theme="noturno"]) .text-gray-400,
html:not([data-theme="noturno"]) .text-gray-500 { color: #5f6775; }
/* "Sair" e afins em vermelho claro (2,77:1) */
html:not([data-theme="noturno"]) .text-red-400 { color: #dc2626; }
/* Noturno: elemento com fundo próprio claro (vira slate) + cinza-400 — ex. números do
   passo-a-passo: 3,06:1 → --text-2 */
[data-theme="noturno"] .bg-white.text-gray-400 { color: var(--text-2) !important; }

/* Links soltos (Sair, Voltar, Início, "+ Novo"): alvo de 44px só em telas por toque */
@media (pointer: coarse) {
  .alvo { display: inline-flex; align-items: center; min-height: 44px; }
  .alvo.block, .alvo.flex { display: flex; }
  .alvo.text-center { justify-content: center; }
  input[type=checkbox]:not(.sr-only):not(.peer), input[type=radio]:not(.sr-only):not(.peer) { width: 22px; height: 22px; flex-shrink: 0; }
}

/* Noturno: logo colorido do IFSC tem letras pretas — vira branco sobre o fundo escuro
   (fora os documentos de impressão, que ficam em papel branco: style height:64px) */
[data-theme="noturno"] img[src$="/assets/img/logo.png"]:not([style*="64px"]) { filter: brightness(0) invert(1); }

/* ==========================================================================
   Onda 3 de UI (2026-10-02) — painel: telas mais usadas
   ========================================================================== */
/* Noturno: tabelas sem cor própria herdavam o preto do navegador (Base de Alunos, Liberações) */
[data-theme="noturno"] table { color: var(--text); }
/* Temas claros: links/valores em text-brand-dark (#169C80, 3,44:1) e amarelo-600 (2,94:1) */
html:not([data-theme="noturno"]) .text-brand-dark { color: var(--primary-ink); }
html:not([data-theme="noturno"]) .text-yellow-600 { color: #a16207; }
/* Noturno: família emerald (caixas de "ficha vinculada") ficava clara sobre fundo escuro */
[data-theme="noturno"] .bg-emerald-50,
[data-theme="noturno"] .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.12) !important; }
[data-theme="noturno"] .border-emerald-200,
[data-theme="noturno"] .border-emerald-300 { border-color: rgba(16, 185, 129, 0.35) !important; }
[data-theme="noturno"] .text-emerald-700,
[data-theme="noturno"] .text-emerald-800,
[data-theme="noturno"] .text-emerald-900 { color: #6ee7b7 !important; }
/* Noturno: botão não herda a cor do texto (padrão do navegador = preto). Especificidade zero:
   qualquer classe de cor no botão continua valendo. */
:where([data-theme="noturno"]) :where(button) { color: inherit; }
/* Noturno: texto padrão da página (sem isso, tudo que não tem classe de cor herdava preto) */
[data-theme="noturno"] body { color: var(--text); }

/* ==========================================================================
   Onda 4 de UI (2026-10-02) — demais telas do painel + vigilância
   ========================================================================== */
/* Temas claros: tons 500/600 do Tailwind que não chegam a 4,5:1 sobre branco */
html:not([data-theme="noturno"]) .text-gray-300,
html:not([data-theme="noturno"]) .text-gray-200 { color: #6b7280; }   /* "—" de campo vazio: 1,5 → 4,8:1 */
html:not([data-theme="noturno"]) .text-blue-500 { color: #2563eb; }
html:not([data-theme="noturno"]) .text-orange-600 { color: #c2410c; }
html:not([data-theme="noturno"]) .text-purple-500 { color: #7e22ce; }
html:not([data-theme="noturno"]) .text-green-600 { color: #15803d; }
html:not([data-theme="noturno"]) .text-red-600 { color: #b91c1c; }
/* Botão verde com texto branco (bg-green-600 = 3,3:1) */
[data-theme] .bg-green-600.text-white { background-color: #15803d !important; }

/* Noturno: famílias que ainda não tinham espelho escuro */
[data-theme="noturno"] .bg-indigo-50,
[data-theme="noturno"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.15) !important; }
[data-theme="noturno"] .border-indigo-200,
[data-theme="noturno"] .border-indigo-300 { border-color: rgba(129, 140, 248, 0.35) !important; }
[data-theme="noturno"] .text-indigo-600,
[data-theme="noturno"] .text-indigo-700,
[data-theme="noturno"] .text-indigo-800,
[data-theme="noturno"] .text-indigo-900 { color: #a5b4fc !important; }
[data-theme="noturno"] .text-orange-600,
[data-theme="noturno"] .text-orange-700 { color: #fb923c !important; }
[data-theme="noturno"] .text-purple-500,
[data-theme="noturno"] .text-purple-600 { color: #c084fc !important; }
[data-theme="noturno"] .text-red-600 { color: #fca5a5 !important; }
[data-theme="noturno"] .text-blue-800 { color: #93c5fd !important; }
[data-theme="noturno"] .bg-gray-100 code,
[data-theme="noturno"] code.bg-gray-100 { color: var(--text-2) !important; }
/* Verde-água fixo antigo usado como texto (#169C80 = 3,44:1) */
[data-theme] .text-\[\#169C80\] { color: var(--primary-ink) !important; }