/* =====================================================================
   Sistema de temas (Claro / Intermediário / Escuro)
   Incluído em todas as páginas. Define os valores de cada tema; as páginas
   usam as variáveis (var(--card), var(--texto)...) para se adaptarem.
   ===================================================================== */

/* Variáveis semânticas novas — base = tema CLARO (não sobrescreve as :root
   já definidas em cada página; só acrescenta as que faltavam). */
:root{
  /* defaults (tema claro) das variáveis usadas pelas várias telas — garante que
     todas existam mesmo que a página não as declare no seu próprio :root. */
  --card:#ffffff;
  --fundo:#f5f7fa;
  --cinza:#f5f7fa;          /* fundo de página usado pelas telas de cadastro */
  --texto2:#5b6677;
  --verde-suave:#e6f6ee;
  --azul-suave:#ebf2f7;
  --laranja-suave:#fdf2e0;
  --vermelho-suave:#fdeaea;
  --painel:#f7f9fb;         /* fundo sutil de seções/painéis */
  --painel-hover:#eef3f8;
  --trilho:#eef2f7;         /* trilho de toggles/abas, barra de progresso */
  --realce:#e8f0fb;         /* realce de célula clicável (hover) */
  --linha-hover:#f4f8fc;    /* hover de linha de tabela */
  --scroll:#cdd6e2;         /* thumb de scrollbar */
  --texto3:#c4cbd6;         /* texto bem apagado (zeros, separadores) */
  --texto-mudo:#8792a3;     /* texto apagado (sem produção) */
  --grid-chart:rgba(15,27,45,.06);
}

/* ---------- Intermediário (menos brilho, ainda claro) ---------- */
:root[data-theme="dim"]{
  --fundo:#dbe1ea;
  --cinza:#dbe1ea;
  --card:#eceff5;
  --painel:#e2e7f0;
  --painel-hover:#d9e0ea;
  --trilho:#dae1ec;
  --realce:#d3e0f1;
  --linha-hover:#e0e7f2;
  --borda:#c3ccdb;
  --scroll:#b4bfd1;
  --texto:#1a2437;
  --texto2:#4c5768;
  --texto3:#98a4b7;
  --texto-mudo:#7a8598;
  --azul-suave:#dbe6f2;
  --verde-suave:#d7ecdf;
  --laranja-suave:#efe6d3;
  --vermelho-suave:#f1dede;
  --sombra:0 1px 2px rgba(20,30,50,.06), 0 4px 16px rgba(20,30,50,.08);
  --sombra-hover:0 2px 4px rgba(20,30,50,.08), 0 8px 28px rgba(20,30,50,.12);
  --grid-chart:rgba(26,36,55,.10);
}

/* ---------- Escuro ---------- */
:root[data-theme="dark"]{
  --fundo:#0e131a;
  --cinza:#0e131a;
  --card:#1a212c;
  --painel:#212a37;
  --painel-hover:#283340;
  --trilho:#242e3b;
  --realce:#26364a;
  --linha-hover:#222c39;
  --borda:#2c3846;
  --scroll:#39485a;
  --texto:#e7edf5;
  --texto2:#9fb0c4;
  --texto3:#5d6b7d;
  --texto-mudo:#7b8a9d;
  --azul:#3d8fca;          /* azul mais claro p/ contraste de texto/links no escuro */
  --azul-claro:#5aa4d8;
  --azul-suave:rgba(56,129,176,.20);
  --verde-suave:rgba(15,157,88,.22);
  --laranja-suave:rgba(232,145,12,.22);
  --vermelho-suave:rgba(229,72,77,.22);
  --sombra:0 1px 2px rgba(0,0,0,.30), 0 4px 16px rgba(0,0,0,.40);
  --sombra-hover:0 2px 4px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.50);
  --grid-chart:rgba(230,237,245,.08);
}

/* Campos de formulário acompanham o tema */
input, select, textarea{ background:var(--card); color:var(--texto); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dim"]  input::placeholder{ color:var(--texto-mudo); }
:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator{ filter:invert(.85); }

/* =====================================================================
   Controle de tema no cabeçalho (segmentado) — texto branco sobre o
   header azul, funciona igual em todos os temas.
   ===================================================================== */
#temaSwitch{display:inline-flex;gap:2px;background:rgba(255,255,255,.14);border-radius:9px;padding:3px}
#temaSwitch button{background:none;border:none;color:#fff;font-family:inherit;font-size:12px;font-weight:600;padding:5px 10px;border-radius:7px;cursor:pointer;opacity:.72;transition:opacity .15s,background .15s;line-height:1}
#temaSwitch button:hover{opacity:1}
#temaSwitch button.on{background:rgba(255,255,255,.26);opacity:1}
@media(max-width:640px){ #temaSwitch button{padding:5px 7px;font-size:11px} }
/* variante flutuante para telas sem cabeçalho (login, dias úteis, ativação) */
#temaSwitch.flutuante{position:fixed;top:12px;right:14px;z-index:60;background:rgba(15,27,45,.82);box-shadow:0 4px 14px rgba(0,0,0,.28)}
:root[data-theme="dark"] #temaSwitch.flutuante{background:rgba(0,0,0,.55)}