/* ==========================================================================
   INGRA — tema (claro/escuro)
   Tokens de superfície, texto e borda usados por todos os ingra-<pacote>.css.
   Regra para pacotes novos: cartões, botões claros, chips neutros e textos
   usam var(--ig-surface*), var(--ig-text*), var(--ig-border-*) — nunca
   #fff/#f8fafc/#0f2a3d fixos — para que o tema escuro funcione sem listas
   manuais. Cores semânticas (vermelho, verde, âmbar) podem continuar fixas.
   Papel de documento (.ia-folha, .mdl-folha, .ied-folha) continua branco.
   ========================================================================== */
:root {
    --ig-surface: #fff;
    --ig-surface-2: #f8fafc;
    --ig-surface-3: #f1f5f9;
    --ig-surface-brand: #eef6fb;
    --ig-border-soft: #e2e8f0;
    --ig-border-brand: #bfe3f0;
    --ig-text-soft: #334155;
    --ig-brand-text: #01527d;
    --ig-heading: #013252;
    --ig-link: #006699;
    --ig-info-text: #0e7490;
}

/* Tema escuro (botão sol/lua do Filament ou Minha segurança e preferências) */
html.dark {
    --ig-surface: #0f2536;
    --ig-surface-2: #0c2130;
    --ig-surface-3: #163247;
    --ig-surface-brand: #103449;
    --ig-border-soft: rgba(148, 197, 222, .16);
    --ig-border-brand: rgba(45, 212, 234, .28);
    --ig-text: #e2edf5;
    --ig-text-2: #94a3b8;
    --ig-text-soft: #cbd5e1;
    --ig-brand-text: #7dd3ea;
    --ig-heading: #f1f7fb;
    --ig-link: #5cc8e6;
    --ig-info-text: #67e8f9;
    --ig-line: rgba(148, 197, 222, .12);
    --ig-page: #06131d;
    color-scheme: dark;
}
html.dark body.fi-body { background: #06131d; }
html.dark .fi-topbar nav { background: #0a1c29 !important; border-color: rgba(148, 197, 222, .1) !important; }
html.dark .fi-section, html.dark .fi-ta-ctn, html.dark .fi-wi-stats-overview-stat, html.dark .fi-modal-window { background-color: #0b1e2c; }
html.dark :is(h1, h2, h3).fi-header-heading { color: #f1f7fb; }

/* Papel de documento continua branco; o texto herdado precisa ser escuro. */
html.dark :is(.ia-folha, .mdl-folha) { color: #0f172a; }

/* Containers com tinta semântica cujo conteúdo usa os tokens de texto. */
html.dark .ig-andamento-nao-lido { background: rgba(239, 68, 68, .08) !important; }
html.dark .ig-int-processo.is-vazio { background: rgba(245, 158, 11, .08); }
html.dark .ingra-historico-item.feita { background: rgba(34, 197, 94, .06); }

/* Superfícies do ingra.css (arquivo base, não editado): mesmos tokens, só no escuro.
   :where() mantém a especificidade original, então modificadores (.on, .hoje) continuam vencendo. */
:where(html.dark) .ig-panel { background: var(--ig-surface); }
:where(html.dark) .ig-search { background: var(--ig-surface); }
:where(html.dark) .ig-tabs { background: var(--ig-surface-2); }
:where(html.dark) .ig-tab { color: var(--ig-text-2); }
:where(html.dark) .ig-tab:hover { color: var(--ig-heading); }
:where(html.dark) .ig-tab-filtro { color: var(--ig-brand-text); }
:where(html.dark) .ig-row:hover { background: var(--ig-surface-2); }
:where(html.dark) .ig-check { border: 2px solid var(--ig-border-soft); background: var(--ig-surface); }
:where(html.dark) .ig-chip-tipo { background: var(--ig-surface-brand); color: var(--ig-brand-text); }
:where(html.dark) .ig-tipo-compromisso { background: var(--ig-surface-3); color: var(--ig-text-soft); }
:where(html.dark) .ig-row-resp { color: var(--ig-text-soft); }
:where(html.dark) .ig-row-prazo { color: var(--ig-text-soft); }
:where(html.dark) .ig-coluna { background: var(--ig-surface-3); }
:where(html.dark) .ig-coluna-head i { color: var(--ig-text-2); background: var(--ig-surface); }
:where(html.dark) .ig-coluna-resumo { color: var(--ig-brand-text); }
:where(html.dark) .ig-cartao { background: var(--ig-surface); }
:where(html.dark) a.ig-cartao-titulo:hover { color: var(--ig-link); }
:where(html.dark) .ig-cartao-sub { color: var(--ig-text-2); }
:where(html.dark) .ig-cartao-tags span { background: var(--ig-surface-3); color: var(--ig-text-soft); }
:where(html.dark) .ig-cartao-tags .ig-tag-primary { background: var(--ig-surface-brand); color: var(--ig-brand-text); }
:where(html.dark) .ig-ag-main { background: var(--ig-surface); }
:where(html.dark) .ig-ag-nav button { background: var(--ig-surface); }
:where(html.dark) .ig-ag-nav button:hover { background: var(--ig-surface-2); }
:where(html.dark) .ig-ag-chip { background: var(--ig-surface-brand); color: var(--ig-brand-text); }
:where(html.dark) .ig-ag-sem { color: var(--ig-text-2); background: var(--ig-surface-2); }
:where(html.dark) .ig-ag-dia:hover { background: var(--ig-surface-2); }
:where(html.dark) .ig-ag-dia.fds { background: var(--ig-surface-2); }
:where(html.dark) .ig-ag-item { background: var(--ig-surface-brand); color: var(--ig-brand-text); }
:where(html.dark) .ig-ag-mais { color: var(--ig-text-2); }
:where(html.dark) .ig-ag-hora { color: var(--ig-link); }
:where(html.dark) .ig-ag-titulo:hover { color: var(--ig-link); }
:where(html.dark) .ig-agx-visoes { background: var(--ig-surface-3); }
:where(html.dark) .ig-agx-visoes button { color: var(--ig-text-2); }
:where(html.dark) .ig-agx-bloco { background: var(--ig-surface); }
:where(html.dark) .ig-agx-bloco-head button { color: var(--ig-link); }
:where(html.dark) .ig-agx-pessoa { background: var(--ig-surface-2); }
:where(html.dark) .ig-agx-pessoa.on { background: var(--ig-surface-brand); }
:where(html.dark) .ig-agx-marca { color: var(--ig-link); }
:where(html.dark) .ig-agx-rotulo { color: var(--ig-text-2); }
:where(html.dark) :is(.ig-agx-legenda .pendente, .ig-agx-evento.pendente, .ig-agx-bloco-ev.pendente) { background: var(--ig-surface-brand); color: var(--ig-brand-text); }
:where(html.dark) .ig-agx-cal { background: var(--ig-surface); }
:where(html.dark) :is(.ig-agx-nav button, .ig-agx-hoje) { background: var(--ig-surface); }
:where(html.dark) :is(.ig-agx-nav button:hover, .ig-agx-hoje:hover) { background: var(--ig-surface-2); }
:where(html.dark) .ig-agx-sem { color: var(--ig-text-2); background: var(--ig-surface-2); }
:where(html.dark) .ig-agx-celula:hover { background: var(--ig-surface-2); }
:where(html.dark) .ig-agx-celula.fds { background: var(--ig-surface-2); }
:where(html.dark) .ig-agx-num:hover { background: var(--ig-surface-brand); }
:where(html.dark) .ig-agx-mais { color: var(--ig-text-2); }
:where(html.dark) .ig-agx-canto { background: var(--ig-surface-2); }
:where(html.dark) .ig-agx-diahead { background: var(--ig-surface-2); }
:where(html.dark) .ig-agx-diahead small { color: var(--ig-text-2); }