/* =====================================================================
   TEMA RaizGestao -- camada de aparencia (claro e escuro)

   Esta folha entra DEPOIS do tailwind-compiled.css e so redefine cores,
   tipografia e acabamento. Nao muda estrutura, nao muda comportamento.
   Como o Tailwind daqui e um arquivo ja compilado, o prefixo "dark:" nao
   existiria; por isso o modo escuro e feito redefinindo as proprias
   classes de utilidade dentro de html[data-tema="escuro"].

   Especificidade: html[data-tema="..."] .classe = (0,2,1), que vence as
   classes do Tailwind (0,1,0) sem precisar de !important em quase nada.
===================================================================== */

/* ------------------------------------------------------------------
   0. FONTE -- servida pelo proprio RaizGestao (static/fonts), sem
   chamada ao Google: nenhum IP de usuario sai para terceiros (LGPD).
   IBM Plex Sans, licenca SIL OFL 1.1 (ver LICENSE.txt na pasta).
------------------------------------------------------------------ */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/ibm-plex-sans/IBMPlexSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/ibm-plex-sans/IBMPlexSans-Medium.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/ibm-plex-sans/IBMPlexSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700 900; font-display: swap;
    src: url('../fonts/ibm-plex-sans/IBMPlexSans-Bold.woff2') format('woff2'); }

/* ------------------------------------------------------------------
   1. FICHA DE CORES
   O verde #1B4332 e a marca da SPVS e foi mantido. O neutro em volta e
   levemente esverdeado em vez de cinza puro -- conversa com o verde sem
   cair no bege. No escuro nao usamos preto: um verde-ardosia dessaturado
   cansa menos em jornada longa e deixa o verde da marca legivel.
------------------------------------------------------------------ */
:root {
    --marca:          #1B4332;
    --marca-clara:    #2D6A4F;
    --marca-viva:     #059669;

    --fundo:          #F4F6F4;
    --painel:         #FFFFFF;
    --elevado:        #EBEFEC;
    --borda:          #DEE5E0;
    --borda-forte:    #C9D3CC;

    --tinta:          #16211C;
    --tinta-media:    #4A5A52;
    --tinta-fraca:    #74857C;

    --sombra-1: 0 1px 2px rgba(22, 33, 28, .06);
    --sombra-2: 0 2px 8px rgba(22, 33, 28, .08);
    --sombra-3: 0 8px 28px rgba(22, 33, 28, .12);

    --raio:   10px;
    --raio-g: 14px;

    /* Status: mesmos significados de hoje, saturacao acertada para
       conviverem lado a lado sem brigar. */
    --st-programada-bg: #EDE9FE;  --st-programada-tx: #5B21B6;
    --st-andamento-bg:  #DBEAFE;  --st-andamento-tx:  #1D4ED8;
    --st-atrasada-bg:   #FFE4E6;  --st-atrasada-tx:   #BE123C;
    --st-concluida-bg:  #D1FAE5;  --st-concluida-tx:  #047857;
    --st-cancelada-bg:  #E8EBE9;  --st-cancelada-tx:  #5B6B63;
}

html[data-tema="escuro"] {
    --marca:          #4FB286;
    --marca-clara:    #6ECFA4;
    --marca-viva:     #34D399;

    --fundo:          #0F1513;
    --painel:         #1A231F;
    --elevado:        #232E29;
    --borda:          #29362F;   /* linhas suaves: separam sem riscar */
    --borda-forte:    #35443C;

    --tinta:          #E4EBE6;
    --tinta-media:    #A8B8AF;
    --tinta-fraca:    #8FA097;   /* >= 4.5:1 sobre --elevado (cabecalho de tabela) */

    /* Matizes de apoio: fundo tingido + texto claro do mesmo tom.
       Substituem os -50/-100 do Tailwind, que no escuro viravam faixas
       claras com texto claro em cima. Todos >= 7:1. */
    --tom-azul-bg:   #1B2938;  --tom-azul-tx:   #93C5FD;  --tom-azul-bd:   #2B4260;
    --tom-verde-bg:  #15302A;  --tom-verde-tx:  #6EE7B7;  --tom-verde-bd:  #24493C;
    --tom-roxo-bg:   #29243F;  --tom-roxo-tx:   #C4B5FD;  --tom-roxo-bd:   #3F3763;
    --tom-ambar-bg:  #322919;  --tom-ambar-tx:  #FCD34D;  --tom-ambar-bd:  #57461F;
    --tom-verm-bg:   #3A2220;  --tom-verm-tx:   #F28B7F;  --tom-verm-bd:   #5A322D;
    --tom-ceu-bg:    #172C37;  --tom-ceu-tx:    #7DD3FC;  --tom-ceu-bd:    #23495A;
    --tom-indigo-bg: #22253E;  --tom-indigo-tx: #A5B4FC;  --tom-indigo-bd: #383E66;

    /* No escuro a hierarquia vem do degrau de fundo, nao da sombra:
       sombra preta sobre fundo escuro nao se ve. */
    --sombra-1: none;
    --sombra-2: 0 1px 0 rgba(255,255,255,.04) inset;
    --sombra-3: 0 12px 32px rgba(0, 0, 0, .5);

    --st-programada-bg: #2E2A4A;  --st-programada-tx: #C4B5FD;
    --st-andamento-bg:  #1E2F4D;  --st-andamento-tx:  #93C5FD;
    --st-atrasada-bg:   #3A2220;  --st-atrasada-tx:   #F28B7F;
    --st-concluida-bg:  #16352A;  --st-concluida-tx:  #6EE7B7;
    --st-cancelada-bg:  #262F2B;  --st-cancelada-tx:  #9CAEA5;
}

/* ------------------------------------------------------------------
   2. TIPOGRAFIA
   Uma familia so. Numeros tabulares: numa tabela de metas e resultados,
   digitos de mesma largura alinham a coluna e tiram o "pulinho" quando o
   valor muda. A pilha do sistema fica como reserva se a fonte nao vier.
------------------------------------------------------------------ */
body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Arial, sans-serif;
    font-feature-settings: 'tnum' 1, 'cv05' 1;
    -webkit-font-smoothing: antialiased;
    color: var(--tinta);
    background: var(--fundo);
}

table, input, select, textarea, .kanban-card, [class*="kpi-"] {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------
   3. SUPERFICIES -- vale nos dois modos
------------------------------------------------------------------ */
html[data-tema] body            { background: var(--fundo); }
html[data-tema] main            { background: var(--fundo) !important; }

html[data-tema] .bg-white       { background-color: var(--painel) !important; }
html[data-tema] .bg-gray-50     { background-color: var(--fundo) !important; }
html[data-tema] .bg-gray-100    { background-color: var(--elevado) !important; }
html[data-tema] .bg-gray-200    { background-color: var(--elevado) !important; }

html[data-tema] .border-gray-100 { border-color: var(--borda) !important; }
html[data-tema] .border-gray-200 { border-color: var(--borda) !important; }
html[data-tema] .border-gray-300 { border-color: var(--borda-forte) !important; }

html[data-tema] .text-gray-800,
html[data-tema] .text-gray-900  { color: var(--tinta) !important; }
html[data-tema] .text-gray-600,
html[data-tema] .text-gray-700  { color: var(--tinta-media) !important; }
html[data-tema] .text-gray-400,
html[data-tema] .text-gray-500  { color: var(--tinta-fraca) !important; }

/* O verde da marca escrito direto no HTML (#1B4332) precisa clarear no
   escuro, senao vira um borrao sobre fundo escuro. */
html[data-tema="escuro"] [class*="#1B4332"],
html[data-tema="escuro"] .text-\[\#1B4332\] { color: var(--marca) !important; }

/* ------------------------------------------------------------------
   4. ACABAMENTO -- cantos, sombras e molduras
   Um raio por tamanho de elemento, nao um raio unico em tudo: botao e
   etiqueta sao menores que cartao e modal, e a diferenca ajuda a ler a
   hierarquia.
------------------------------------------------------------------ */
html[data-tema] .rounded-lg  { border-radius: var(--raio); }
html[data-tema] .rounded-xl  { border-radius: var(--raio-g); }
html[data-tema] .shadow-sm   { box-shadow: var(--sombra-1); }
html[data-tema] .shadow,
html[data-tema] .shadow-md   { box-shadow: var(--sombra-2); }
html[data-tema] .shadow-lg,
html[data-tema] .shadow-xl,
html[data-tema] .shadow-2xl  { box-shadow: var(--sombra-3); }

/* ------------------------------------------------------------------
   5. A TABELA -- onde o ganho aparece primeiro
   Sem zebra: a listra ganha de qualquer cor de status que a linha queira
   mostrar. Em vez disso, linha divisoria fina e realce so no hover.
------------------------------------------------------------------ */
html[data-tema] table { border-collapse: separate; border-spacing: 0; }

html[data-tema] thead th {
    background: var(--elevado);
    color: var(--tinta-media);
    font-weight: 600;
    letter-spacing: .01em;
    border-bottom: 1px solid var(--borda-forte);
}

html[data-tema] tbody td { border-color: var(--borda); }

html[data-tema] tbody tr:hover > td {
    background-color: color-mix(in srgb, var(--marca) 7%, transparent);
}

/* ------------------------------------------------------------------
   6. CAMPOS
------------------------------------------------------------------ */
html[data-tema] input,
html[data-tema] select,
html[data-tema] textarea {
    background-color: var(--painel);
    color: var(--tinta);
    border-color: var(--borda-forte);
    border-radius: var(--raio);
}

html[data-tema] input::placeholder,
html[data-tema] textarea::placeholder { color: var(--tinta-fraca); }

html[data-tema="escuro"] select option {
    background: var(--painel);
    color: var(--tinta);
}

/* Foco visivel para quem navega por teclado -- hoje alguns controles
   perdem o contorno e a pessoa nao sabe onde esta. */
html[data-tema] :is(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--marca-viva);
    outline-offset: 2px;
    border-radius: var(--raio);
}

/* ------------------------------------------------------------------
   7. ETIQUETAS DE STATUS
   Um estilo so, usado na tabela, no kanban e no dashboard, para a mesma
   informacao nao ter tres aparencias diferentes.
------------------------------------------------------------------ */
html[data-tema] .bg-purple-100  { background-color: var(--st-programada-bg) !important; }
html[data-tema] .text-purple-700{ color: var(--st-programada-tx) !important; }
html[data-tema] .bg-blue-100    { background-color: var(--st-andamento-bg) !important; }
html[data-tema] .text-blue-700  { color: var(--st-andamento-tx) !important; }
html[data-tema] .bg-rose-100    { background-color: var(--st-atrasada-bg) !important; }
html[data-tema] .text-rose-700  { color: var(--st-atrasada-tx) !important; }
html[data-tema] .bg-emerald-100 { background-color: var(--st-concluida-bg) !important; }
html[data-tema] .text-emerald-700 { color: var(--st-concluida-tx) !important; }

html[data-tema="escuro"] .bg-blue-50,
html[data-tema="escuro"] .bg-red-50     { background-color: var(--elevado) !important; }

/* Numeros grandes dos cards do painel e textos coloridos soltos.
   Sobre fundo escuro, o tom 500/600 do Tailwind fica abafado; estes sao
   os mesmos matizes, clareados ate voltarem a ler. */
html[data-tema="escuro"] .text-blue-500,
html[data-tema="escuro"] .text-blue-600   { color: #7DB3F5 !important; }
html[data-tema="escuro"] .text-emerald-500,
html[data-tema="escuro"] .text-emerald-600{ color: #4ADE9E !important; }
html[data-tema="escuro"] .text-purple-500,
html[data-tema="escuro"] .text-purple-600 { color: #C4A7FC !important; }
html[data-tema="escuro"] .text-rose-500,
html[data-tema="escuro"] .text-rose-600   { color: #F28B7F !important; }
html[data-tema="escuro"] .text-red-500,
html[data-tema="escuro"] .text-red-600    { color: #EF6F64 !important; }
html[data-tema="escuro"] .text-amber-500,
html[data-tema="escuro"] .text-amber-600,
html[data-tema="escuro"] .text-amber-700  { color: #FCD34D !important; }
html[data-tema="escuro"] .text-indigo-600,
html[data-tema="escuro"] .text-indigo-700 { color: #A5B4FC !important; }

/* ------------------------------------------------------------------
   8. KANBAN
------------------------------------------------------------------ */
html[data-tema] .kanban-coluna { background: var(--elevado); border-color: var(--borda); }
html[data-tema] .kanban-card {
    background: var(--painel);
    border-color: var(--borda);
    box-shadow: var(--sombra-1);
}
html[data-tema="escuro"] .kanban-card { border: 1px solid var(--borda); }

/* ------------------------------------------------------------------
   9. MODAIS E PAINEIS FLUTUANTES
------------------------------------------------------------------ */
html[data-tema="escuro"] .bg-black\/50,
html[data-tema="escuro"] .bg-black\/60,
html[data-tema="escuro"] .bg-gray-900\/60 { background-color: rgba(0,0,0,.72) !important; }

html[data-tema] .rzm-modal-box,
html[data-tema] #sino-painel {
    background: var(--painel);
    border: 1px solid var(--borda);
    box-shadow: var(--sombra-3);
}
html[data-tema] .sino-topo { background: var(--painel); border-color: var(--borda); }
html[data-tema] .sino-item { border-color: var(--borda); }
html[data-tema] .sino-item:hover { background: var(--elevado); }

/* Modulos (riscos, sinergias, indicadores, biblioteca) */
html[data-tema] .rzm-card   { background: var(--painel); border-color: var(--borda); }
html[data-tema] .rzm-kpi    { background: var(--painel); border-color: var(--borda); }
html[data-tema] .rzm-table th { background: var(--elevado); color: var(--tinta-media); }
html[data-tema] .rzm-table td { border-color: var(--borda); }
html[data-tema] .rzm-muted  { color: var(--tinta-fraca); }
html[data-tema] .rzm-vazio  { color: var(--tinta-fraca); }

/* ------------------------------------------------------------------
   10. BARRA LATERAL E CABECALHO
------------------------------------------------------------------ */
html[data-tema] #sidebar { background: var(--painel); border-right: 1px solid var(--borda); }
html[data-tema] nav      { background: var(--painel); border-color: var(--borda); }
html[data-tema] #faixa-abas { background: var(--elevado); border-color: var(--borda); }
html[data-tema] #faixa-abas > button { color: var(--tinta-media); }
html[data-tema] #faixa-abas > button.bg-white {
    background: var(--painel) !important;
    color: var(--marca) !important;
    box-shadow: var(--sombra-1);
}
html[data-tema] #dash-barra-fixa,
html[data-tema] #dash-barra-fixa::before { background: var(--fundo); }
html[data-tema] #dash-barra-fixa { border-color: var(--borda); }

/* Botoes do cabecalho criados por JS (atualizar e tema) */
html[data-tema] #rz-atualizar,
html[data-tema] #rz-tema {
    background: var(--painel);
    border-color: var(--borda-forte);
    color: var(--tinta-media);
}
html[data-tema] #rz-atualizar:hover,
html[data-tema] #rz-tema:hover {
    background: var(--elevado);
    color: var(--marca);
    border-color: var(--marca);
}
html[data-tema] #btn-clima-bg {
    background: var(--painel);
    border-color: var(--borda);
    color: var(--tinta);
}

/* ------------------------------------------------------------------
   11. BARRAS DE ROLAGEM no escuro -- a clara padrao corta a tela
------------------------------------------------------------------ */
html[data-tema="escuro"] * { scrollbar-color: var(--borda-forte) transparent; }
html[data-tema="escuro"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-tema="escuro"] ::-webkit-scrollbar-track { background: transparent; }
html[data-tema="escuro"] ::-webkit-scrollbar-thumb {
    background: var(--borda-forte);
    border-radius: 6px;
    border: 2px solid var(--fundo);
}

/* ------------------------------------------------------------------
   12. TROCA DE TEMA
   Transicao curta so nas cores. Quem pediu menos animacao no sistema
   operacional nao recebe nenhuma.
------------------------------------------------------------------ */
html[data-tema] body,
html[data-tema] nav,
html[data-tema] #sidebar,
html[data-tema] .bg-white,
html[data-tema] .kanban-card {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

@media (prefers-reduced-motion: reduce) {
    html[data-tema] * { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------------
   13. COBERTURA COMPLETA DO MODO ESCURO
   Tudo aqui vale SO no escuro. Cobre o que as secoes acima nao
   alcancavam: as variantes com transparencia do Tailwind (bg-gray-100/90,
   bg-blue-50/60...), os tons -50/-100/-200 coloridos, os textos -700/-800
   escuros, e as folhas proprias do banner de cookies e dos modulos.
   Regra: fundo tingido escuro + texto claro do mesmo matiz.
------------------------------------------------------------------ */

/* 13.0 Controles nativos do navegador (icone do calendario, lista do
   select, barra de rolagem) tambem no escuro */
html[data-tema="escuro"] { color-scheme: dark; }

/* 13.1 Superficies neutras com transparencia */
html[data-tema="escuro"] .bg-gray-50\/40,
html[data-tema="escuro"] .bg-gray-50\/50,
html[data-tema="escuro"] .bg-gray-50\/80,
html[data-tema="escuro"] .bg-slate-50,
html[data-tema="escuro"] .bg-\[\#F8F9FA\],
html[data-tema="escuro"] .bg-white\/50,
html[data-tema="escuro"] .bg-white\/80     { background-color: var(--painel) !important; }
html[data-tema="escuro"] .bg-gray-100\/80,
html[data-tema="escuro"] .bg-gray-100\/90,
html[data-tema="escuro"] .bg-gray-200\/60,
html[data-tema="escuro"] .bg-gray-300       { background-color: var(--elevado) !important; }
html[data-tema="escuro"] .bg-gray-400       { background-color: var(--borda-forte) !important; }

/* Abas superiores: o trilho era cinza claro com texto cinza medio (2.2:1) */
html[data-tema="escuro"] .bg-gray-50\/80.rounded-xl.border { border-color: var(--borda) !important; }

/* 13.2 Superficies tingidas (linhas de objetivo, caixas de resultado, alertas) */
html[data-tema="escuro"] :is(.bg-blue-50, .bg-blue-50\/20, .bg-blue-50\/60, .bg-blue-50\/70, .bg-blue-50\/80, .bg-blue-200)
    { background-color: var(--tom-azul-bg) !important; }
html[data-tema="escuro"] :is(.bg-sky-50, .bg-sky-100)
    { background-color: var(--tom-ceu-bg) !important; }
html[data-tema="escuro"] :is(.bg-indigo-50, .bg-indigo-50\/40, .bg-indigo-100)
    { background-color: var(--tom-indigo-bg) !important; }
html[data-tema="escuro"] :is(.bg-purple-50, .bg-purple-200)
    { background-color: var(--tom-roxo-bg) !important; }
html[data-tema="escuro"] :is(.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-\[\#d4edda\])
    { background-color: var(--tom-verde-bg) !important; }
html[data-tema="escuro"] :is(.bg-amber-50, .bg-amber-100, .bg-yellow-100)
    { background-color: var(--tom-ambar-bg) !important; }
html[data-tema="escuro"] :is(.bg-red-50, .bg-red-50\/80, .bg-red-100, .bg-rose-50, .bg-rose-100, .bg-\[\#f8d7da\])
    { background-color: var(--tom-verm-bg) !important; }

/* Degrades claros (cartoes de destaque) */
html[data-tema="escuro"] .from-emerald-50 {
    background-image: linear-gradient(135deg, var(--tom-verde-bg), var(--painel)) !important;
}

/* 13.3 Hover que clareava a linha inteira */
html[data-tema="escuro"] :is(.hover\:bg-gray-50, .hover\:bg-gray-50\/50, .hover\:bg-gray-100, .hover\:bg-white):hover
    { background-color: var(--elevado) !important; }
html[data-tema="escuro"] :is(.hover\:bg-gray-200, .hover\:bg-gray-300):hover
    { background-color: var(--borda) !important; }
html[data-tema="escuro"] :is(.hover\:bg-blue-50, .hover\:bg-blue-100, .hover\:bg-blue-200):hover
    { background-color: var(--tom-azul-bd) !important; }
html[data-tema="escuro"] :is(.hover\:bg-green-50, .hover\:bg-emerald-100):hover
    { background-color: var(--tom-verde-bd) !important; }
html[data-tema="escuro"] :is(.hover\:bg-red-50, .hover\:bg-red-200, .hover\:bg-rose-100):hover
    { background-color: var(--tom-verm-bd) !important; }
html[data-tema="escuro"] :is(.hover\:bg-purple-100):hover { background-color: var(--tom-roxo-bd) !important; }
html[data-tema="escuro"] :is(.hover\:bg-amber-100, .hover\:bg-yellow-200):hover { background-color: var(--tom-ambar-bd) !important; }
html[data-tema="escuro"] .focus\:bg-white:focus { background-color: var(--painel) !important; }

/* 13.4 Textos escuros que sumiam no fundo escuro */
html[data-tema="escuro"] :is(.text-black, .text-gray-900)    { color: var(--tinta) !important; }
html[data-tema="escuro"] :is(.text-blue-800, .text-blue-900, .text-blue-400, .text-blue-300)
    { color: var(--tom-azul-tx) !important; }
html[data-tema="escuro"] :is(.text-sky-700, .text-sky-800)   { color: var(--tom-ceu-tx) !important; }
html[data-tema="escuro"] :is(.text-indigo-500)               { color: var(--tom-indigo-tx) !important; }
html[data-tema="escuro"] :is(.text-purple-800)               { color: var(--tom-roxo-tx) !important; }
html[data-tema="escuro"] :is(.text-green-600, .text-green-700, .text-green-800, .text-\[\#155724\], .text-\[\#088c52\])
    { color: var(--tom-verde-tx) !important; }
html[data-tema="escuro"] :is(.text-yellow-700)               { color: var(--tom-ambar-tx) !important; }
html[data-tema="escuro"] :is(.text-red-700, .text-\[\#721c24\]) { color: var(--tom-verm-tx) !important; }
html[data-tema="escuro"] .text-\[\#0073ea\]                 { color: var(--tom-azul-tx) !important; }
html[data-tema="escuro"] .text-\[\#0ead67\]                 { color: var(--marca-viva) !important; }

html[data-tema="escuro"] :is(.hover\:text-gray-700, .hover\:text-gray-800):hover { color: var(--tinta) !important; }
html[data-tema="escuro"] :is(.hover\:text-blue-600, .hover\:text-blue-700):hover { color: var(--tom-azul-tx) !important; }
html[data-tema="escuro"] :is(.hover\:text-green-700, .hover\:text-green-800, .hover\:text-emerald-600):hover { color: var(--tom-verde-tx) !important; }
html[data-tema="escuro"] :is(.hover\:text-red-600, .hover\:text-red-700):hover { color: var(--tom-verm-tx) !important; }

/* 13.5 Bordas claras que viravam riscos brancos */
html[data-tema="escuro"] :is(.border-gray-200\/80, .divide-gray-200 > *) { border-color: var(--borda) !important; }
html[data-tema="escuro"] .border-gray-400 { border-color: var(--borda-forte) !important; }
html[data-tema="escuro"] :is(.border-blue-100, .border-blue-200, .border-blue-300)       { border-color: var(--tom-azul-bd) !important; }
html[data-tema="escuro"] :is(.border-indigo-100, .border-indigo-200)                     { border-color: var(--tom-indigo-bd) !important; }
html[data-tema="escuro"] :is(.border-purple-200)                                         { border-color: var(--tom-roxo-bd) !important; }
html[data-tema="escuro"] :is(.border-red-100, .border-red-200, .border-rose-100, .border-rose-200) { border-color: var(--tom-verm-bd) !important; }
html[data-tema="escuro"] :is(.border-amber-200)                                          { border-color: var(--tom-ambar-bd) !important; }
html[data-tema="escuro"] :is(.border-sky-200)                                            { border-color: var(--tom-ceu-bd) !important; }

/* 13.6 Botoes verdes/azuis: branco sobre -600 fica em 3.3:1. Um degrau
   mais escuro no fundo leva a >= 4.5:1 sem mudar o matiz. */
html[data-tema="escuro"] .bg-green-600  { background-color: #15803D !important; }
html[data-tema="escuro"] .bg-green-500  { background-color: #16803C !important; }

/* 13.7 Banner e janela de cookies (CSS proprio no base.html) */
html[data-tema="escuro"] :is(.rz-banner, .rz-modal, .rz-reabrir) {
    background: var(--painel);
    border-color: var(--borda);
    box-shadow: var(--sombra-3);
}
html[data-tema="escuro"] :is(.rz-titulo, .rz-categoria-nome)  { color: var(--tinta); }
html[data-tema="escuro"] :is(.rz-texto, .rz-categoria-desc, .rz-btn-texto) { color: var(--tinta-media); }
html[data-tema="escuro"] .rz-link            { color: var(--marca-viva); }
html[data-tema="escuro"] .rz-btn-texto:hover { color: var(--marca-viva); }
html[data-tema="escuro"] .rz-btn-primario    { background: var(--marca); color: #0F1513; }
html[data-tema="escuro"] .rz-btn-primario:hover { background: var(--marca-clara); }
html[data-tema="escuro"] .rz-btn-secundario  { background: var(--elevado); color: var(--tinta); border-color: var(--borda-forte); }
html[data-tema="escuro"] .rz-btn-secundario:hover { background: var(--borda); border-color: var(--tinta-fraca); }
html[data-tema="escuro"] :is(.rz-modal-topo, .rz-modal-rodape, .rz-categoria) { border-color: var(--borda); }
html[data-tema="escuro"] .rz-selo-fixo { background: var(--tom-verde-bg); color: var(--tom-verde-tx); border-color: var(--tom-verde-bd); }
html[data-tema="escuro"] .rz-slider    { background: var(--borda-forte); }

/* 13.8 Modulos: Cronograma, Riscos, Sinergias, Indicadores, Biblioteca */
html[data-tema="escuro"] .rzm-head h2               { color: var(--marca); }
html[data-tema="escuro"] .rzm-head p                { color: var(--tinta-fraca); }
html[data-tema="escuro"] :is(.rzm-input, .rzm-select, .rzm-textarea) {
    background: var(--painel); color: var(--tinta); border-color: var(--borda-forte);
}
html[data-tema="escuro"] .rzm-btn-primary           { background: var(--marca); color: #0F1513; }
html[data-tema="escuro"] .rzm-btn-light             { background: var(--elevado); color: var(--tinta); }
html[data-tema="escuro"] .rzm-btn-danger            { background: var(--tom-verm-bg); color: var(--tom-verm-tx); }
html[data-tema="escuro"] :is(.rzm-card h3, .rzm-kpi b, .rzm-modal-head h3, .rzm-bib-doc .info b) { color: var(--tinta); }
html[data-tema="escuro"] :is(.rzm-kpi span, .rzm-vazio, .rzm-muted, .rzm-modal-close, .rzm-cat-titulo, .rzm-matriz .eixo) { color: var(--tinta-fraca); }
html[data-tema="escuro"] :is(.rzm-form label, .rzm-legenda)  { color: var(--tinta-media); }
html[data-tema="escuro"] :is(.rzm-table-wrap, .rzm-gantt)    { background: var(--painel); border-color: var(--borda); }
html[data-tema="escuro"] .rzm-table td              { color: var(--tinta-media); border-color: var(--borda); }
html[data-tema="escuro"] .rzm-table tr:hover td     { background: var(--elevado); }
html[data-tema="escuro"] .rzm-table .rzm-grupo td   { background: var(--tom-verde-bg); color: var(--tom-verde-tx); }
html[data-tema="escuro"] .rzm-table .rzm-subgrupo td{ background: var(--tom-azul-bg);  color: var(--tom-azul-tx); }
html[data-tema="escuro"] .rzm-link                  { color: var(--tom-verde-tx); }
html[data-tema="escuro"] .rzm-bar                   { background: var(--elevado); }
html[data-tema="escuro"] .rzm-tabs                  { background: var(--elevado); }
html[data-tema="escuro"] .rzm-tabs button           { color: var(--tinta-media); }
html[data-tema="escuro"] .rzm-tabs button.ativo     { background: var(--painel); color: var(--marca); }
html[data-tema="escuro"] :is(.rzm-modal-head, .rzm-modal-foot, .rzm-g-row, .rzm-bib-doc) { border-color: var(--borda); }
html[data-tema="escuro"] .rzm-g-label               { background: var(--painel); border-color: var(--borda); color: var(--tinta-media); }
html[data-tema="escuro"] .rzm-g-head                { background: var(--elevado); }
html[data-tema="escuro"] .rzm-g-head .rzm-g-label   { background: var(--elevado); color: var(--tinta-media); }
html[data-tema="escuro"] .rzm-g-mes                 { border-color: var(--borda); color: var(--tinta-fraca); }
html[data-tema="escuro"] .rzm-g-grid                { border-color: var(--borda); }
html[data-tema="escuro"] :is(.rzm-g-proj, .rzm-g-proj .rzm-g-label) { background: var(--tom-verde-bg); }
html[data-tema="escuro"] .rzm-g-proj .rzm-g-label   { color: var(--tom-verde-tx); }
html[data-tema="escuro"] .rzm-g-obj .rzm-g-label    { background: var(--tom-azul-bg); color: var(--tom-azul-tx); }
html[data-tema="escuro"] .rzm-g-ativ .rzm-g-label   { color: var(--tinta-media); }
html[data-tema="escuro"] .rzm-g-marco               { border-color: var(--painel); }

/* Etiquetas e celulas que o modulos.js pinta com style="" */
html[data-tema="escuro"] .rzm-badge[style*="#ecfdf5"] { background: var(--tom-verde-bg) !important; color: var(--tom-verde-tx) !important; }
html[data-tema="escuro"] .rzm-badge[style*="#eff6ff"] { background: var(--tom-azul-bg)  !important; color: var(--tom-azul-tx)  !important; }
html[data-tema="escuro"] .rzm-badge[style*="#f1f5f9"] { background: var(--elevado)      !important; color: var(--tinta-media)  !important; }
html[data-tema="escuro"] td[style*="#f3f4f6"]         { background: var(--elevado)      !important; }
html[data-tema="escuro"] td[style*="#047857"]         { color: var(--tom-verde-tx)      !important; }

/* 13.9 Cores que o JS escreve direto no elemento (style="color:#...").
   Numero escuro em cartao escuro some; os mesmos matizes, clareados. */
html[data-tema="escuro"] :is([style*="color:#1f2937"], [style*="color:#111827"], [style*="color:#374151"]) { color: var(--tinta) !important; }
html[data-tema="escuro"] :is([style*="color:#1B4332"], [style*="color:#1b4332"]) { color: var(--marca) !important; }
html[data-tema="escuro"] [style*="color:#7c3aed"]  { color: var(--tom-roxo-tx)  !important; }
html[data-tema="escuro"] [style*="color:#2563eb"]  { color: var(--tom-azul-tx)  !important; }
html[data-tema="escuro"] :is([style*="color:#059669"], [style*="color:#10b981"], [style*="color:#16a34a"]) { color: var(--tom-verde-tx) !important; }
html[data-tema="escuro"] :is([style*="color:#dc2626"], [style*="color:#ef4444"]) { color: var(--tom-verm-tx) !important; }
html[data-tema="escuro"] [style*="color:#ea580c"]  { color: #FDBA74 !important; }
html[data-tema="escuro"] :is([style*="color:#ca8a04"], [style*="color:#f59e0b"]) { color: var(--tom-ambar-tx) !important; }

/* Nivel de risco (matriz e etiquetas): pastel claro -> tinta escura do mesmo tom */
html[data-tema="escuro"] [style*="background:#fee2e2"] { background: var(--tom-verm-bg)  !important; color: var(--tom-verm-tx)  !important; }
html[data-tema="escuro"] [style*="background:#ffedd5"] { background: #3A2618            !important; color: #FDBA74            !important; }
html[data-tema="escuro"] [style*="background:#fef9c3"] { background: var(--tom-ambar-bg) !important; color: var(--tom-ambar-tx) !important; }
html[data-tema="escuro"] [style*="background:#dcfce7"] { background: var(--tom-verde-bg) !important; color: var(--tom-verde-tx) !important; }

/* Barras do cronograma e botoes com texto branco: um degrau mais escuro
   no fundo para o branco passar de 4.5:1. Mesmo matiz, mesma leitura. */
html[data-tema="escuro"] [style*="background:#10b981"] { background: #047857 !important; }
html[data-tema="escuro"] [style*="background:#ef4444"] { background: #DC2626 !important; }
html[data-tema="escuro"] [style*="background:#8b5cf6"] { background: #7C3AED !important; }
html[data-tema="escuro"] [style*="background:#9ca3af"] { background: #6B7280 !important; }
html[data-tema="escuro"] [style*="background:#f59e0b"] { background: #B45309 !important; }
html[data-tema="escuro"] :is([style*="background-color: #059669"], .rzm-btn-green) { background-color: #047857 !important; }
html[data-tema="escuro"] .bg-amber-500 { background-color: #B45309 !important; }
html[data-tema="escuro"] .bg-sky-600   { background-color: #0369A1 !important; }

/* Janela do clima (ja e escura): legenda cinza ficava em 3.3:1 */
html[data-tema="escuro"] #modal-clima [style*="color: #6b7280"] { color: #9CA3AF !important; }
html[data-tema="escuro"] [style*="color:#b45309"] { color: var(--tom-ambar-tx) !important; }

/* 13.10 Componentes com CSS proprio no base.html (versao atual) */

/* Menu de projetos da barra lateral */
html[data-tema="escuro"] .menu-proj-codigo { color: var(--tinta-fraca); }
html[data-tema="escuro"] .menu-proj-nome   { color: var(--tinta-media); }
html[data-tema="escuro"] .menu-proj-item:hover { background: var(--tom-verde-bg); border-left-color: var(--marca-viva); }
html[data-tema="escuro"] .menu-proj-item:hover :is(.menu-proj-nome, .menu-proj-codigo) { color: var(--tinta); }

/* Barra de rolagem das tabelas e mascara da barra fixa do painel */
html[data-tema="escuro"] .custom-scroll::-webkit-scrollbar-thumb { background: var(--borda-forte); border-color: var(--fundo); }
html[data-tema="escuro"] .custom-scroll::-webkit-scrollbar-thumb:hover { background: var(--tinta-fraca); }

/* Sino de notificacoes */
html[data-tema="escuro"] #sino-notificacoes       { color: var(--tinta-media); }
html[data-tema="escuro"] #sino-notificacoes:hover { background: var(--elevado); color: var(--marca); }
html[data-tema="escuro"] :is(.sino-topo b, .sino-item b) { color: var(--tinta); }
html[data-tema="escuro"] .sino-topo button        { color: var(--tom-verde-tx); }
html[data-tema="escuro"] :is(.sino-item p, .sino-resumo) { color: var(--tinta-media); }
html[data-tema="escuro"] :is(.sino-secao, .sino-data, .sino-vazio, .sino-lidas summary, .sino-auto) { color: var(--tinta-fraca); }
html[data-tema="escuro"] .sino-item.nova          { background: var(--tom-verde-bg); }
html[data-tema="escuro"] .sino-item.nova:hover    { background: var(--tom-verde-bd); }
html[data-tema="escuro"] .sino-ver-todas          { background: var(--elevado); color: var(--tinta); }
html[data-tema="escuro"] .sino-ver-todas:hover    { background: var(--borda); }
html[data-tema="escuro"] tr.sino-destaque > td    { background: var(--tom-ambar-bg) !important; }

/* Seletor de colunas */
html[data-tema="escuro"] #caixa-colunas { background: var(--painel); border-color: var(--borda); box-shadow: var(--sombra-3); }
html[data-tema="escuro"] #painel-colunas .col-item       { color: var(--tinta-media); }
html[data-tema="escuro"] #painel-colunas .col-item:hover { background: var(--elevado); }
html[data-tema="escuro"] #painel-colunas .col-tag        { background: var(--tom-verde-bg); color: var(--tom-verde-tx); }
html[data-tema="escuro"] #painel-colunas .col-acoes      { border-color: var(--borda); }
html[data-tema="escuro"] #painel-colunas .col-acoes button       { background: var(--elevado); color: var(--tinta); }
html[data-tema="escuro"] #painel-colunas .col-acoes button:hover { background: var(--borda); }

/* Indicadores abertos dentro da linha da tabela */
html[data-tema="escuro"] .btn-indicadores           { background: var(--elevado); border-color: var(--borda-forte); color: var(--tinta-media); }
html[data-tema="escuro"] .btn-indicadores.tem-dados { background: var(--tom-verde-bg); border-color: var(--tom-verde-bd); }
html[data-tema="escuro"] :is(.btn-indicadores:hover, .btn-indicadores.ativo) { background: #047857; border-color: #047857; color: #fff; }
html[data-tema="escuro"] .linha-indicadores > td    { background: var(--fundo) !important; border-color: var(--borda); }
html[data-tema="escuro"] :is(.ind-bloco, .ind-rc)   { background: var(--painel); border-color: var(--borda); }
html[data-tema="escuro"] :is(.ind-nome, .ind-rc p)  { color: var(--tinta); }
html[data-tema="escuro"] .ind-numeros               { color: var(--tinta-media); }
html[data-tema="escuro"] :is(.ind-titulo, .ind-nd, .ind-vazio) { color: var(--tinta-fraca); }
html[data-tema="escuro"] .ind-barra                 { background: var(--elevado); }

/* Outros indicadores (formulario) */
html[data-tema="escuro"] .extras-cabecalho     { color: var(--tinta-fraca); }
html[data-tema="escuro"] .extras-linha input   { background: var(--painel); border-color: var(--borda-forte); color: var(--tinta); }
html[data-tema="escuro"] .extras-remover       { background: var(--tom-verm-bg); color: var(--tom-verm-tx); }
html[data-tema="escuro"] .extras-add           { background: var(--tom-verde-bg); color: var(--tom-verde-tx); border-color: var(--tom-verde-bd); }
html[data-tema="escuro"] .extras-add:hover     { background: var(--tom-verde-bd); }

/* Vinculo usuario x projeto */
html[data-tema="escuro"] .mpu-item             { border-color: var(--borda); color: var(--tinta-media); }
html[data-tema="escuro"] .mpu-item:hover       { background: var(--elevado); }
html[data-tema="escuro"] .mpu-acoes button     { background: var(--elevado); color: var(--tinta); }
html[data-tema="escuro"] .mpu-acoes button:hover { background: var(--borda); }

/* 13.11 Sem rosa e sem linhas brancas
   O vermelho de alerta fica vermelho de verdade (matiz ~5 graus), sem
   puxar para o rosa. O degrade do botao de IA vai do roxo ao indigo.
   Contornos e aneis cinza-claro do Tailwind viram a linha suave do tema. */
html[data-tema="escuro"] :is(.outline-gray-200, .ring-gray-400) {
    outline-color: var(--borda) !important;
    --tw-ring-color: var(--borda) !important;
}
html[data-tema="escuro"] .focus\:ring-gray-200:focus { --tw-ring-color: var(--borda-forte) !important; }
html[data-tema="escuro"] .divide-gray-200 > * + * { border-color: var(--borda) !important; }

html[data-tema="escuro"] :is(.bg-rose-500, .bg-red-500) { background-color: #DC2626 !important; }
html[data-tema="escuro"] .border-rose-500 { border-color: #DC2626 !important; }
html[data-tema="escuro"] .to-fuchsia-500 {
    background-image: linear-gradient(to right, #7C3AED, #4F46E5) !important;
}

/* ------------------------------------------------------------------
   14. CABECALHO NO CELULAR (vale nos dois modos)
   Os icones da direita nao encolhem; a saudacao "Ola, nome" tambem nao
   encolhia e, com nome comprido, empurrava o sino e o "Sair" para fora
   da tela (a pagina inteira ficava mais larga que o celular). Agora a
   saudacao cede o espaco e termina em "..." quando nao couber.
------------------------------------------------------------------ */
@media (max-width: 767px) {
    html[data-tema] #bloco-saudacao { min-width: 0; flex: 1 1 auto; }
    html[data-tema] #user-greeting  {
        min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}

/* Impressao (Relatorio PDF) sempre em claro, para nao gastar tinta nem
   sair ilegivel. */
@media print {
    html[data-tema="escuro"] { --fundo: #fff; --painel: #fff; --elevado: #f3f4f6;
        --tinta: #111; --tinta-media: #333; --tinta-fraca: #666; --borda: #ddd;
        --tom-azul-bg: #eff6ff; --tom-azul-tx: #1d4ed8; --tom-verde-bg: #ecfdf5; --tom-verde-tx: #047857;
        --tom-roxo-bg: #f5f3ff; --tom-roxo-tx: #6d28d9; --tom-ambar-bg: #fffbeb; --tom-ambar-tx: #b45309;
        --tom-verm-bg: #fef2f2; --tom-verm-tx: #b91c1c; --tom-ceu-bg: #f0f9ff; --tom-ceu-tx: #0369a1;
        --tom-indigo-bg: #eef2ff; --tom-indigo-tx: #4338ca; }
    #rz-tema, #rz-atualizar { display: none !important; }
}