/* ── CULTIVE · Tema claro — alternável pelo botão no menu ──────────────────── */
html[data-theme="light"] {
  --bg:#f7f5ee; --bg2:#efece0; --bg3:#e6e2d0;
  --card:rgba(30,45,25,.04); --card-hover:rgba(30,45,25,.07); --card2:rgba(30,45,25,.055);
  --border:rgba(74,122,76,.2); --border-h:rgba(74,122,76,.4); --border-hover:rgba(74,122,76,.4);
  --green:#4a7a4c; --green2:#5a8a5c; --green3:#2f5b32; --gold:#8a6a35; --gold-hi:#c9a45c; --gold-lo:#5c431f;
  --text:#1d2a1c; --text2:rgba(24,36,22,.68); --text3:rgba(24,36,22,.42);
  --ok-bg:rgba(61,102,64,.1); --ok-b:rgba(61,102,64,.35); --ok-t:#2f6b32;
  --warn-bg:rgba(170,130,50,.14); --warn-b:rgba(170,130,50,.35); --warn-t:#8a6a1e;
  --err:#a4393b; --err-bg:rgba(180,80,80,.1); --err-b:rgba(180,80,80,.35); --err-t:#a4393b;
  --orange-bg:rgba(200,130,60,.15); --orange-b:rgba(200,130,60,.4); --orange-t:#8a5420;
  --purple-bg:rgba(139,92,246,.1); --purple-b:rgba(139,92,246,.35); --purple-t:#6d3fc4;
  --blue-bg:rgba(59,130,246,.1); --blue-b:rgba(59,130,246,.35); --blue-t:#1d4ed8;
}

html[data-theme="light"] body::after { opacity:.03; }
html[data-theme="light"] nav { background:rgba(247,245,238,.86) !important; }

/* Alguns painéis/menus internos (dropdowns, listas de opções, modais, toasts, painel de
   notificações) têm fundo escuro fixo de propósito — pra manter contraste alto mesmo no tema
   claro, em vez de virar um card branco. O problema é que o texto/bordas de dentro deles usa
   var(--text)/var(--text3)/var(--border) etc, que no tema claro passam a valer cores ESCURAS
   (pensadas pra fundo claro) — resultando em texto escuro sobre fundo escuro, ilegível.
   Redefinindo essas variáveis aqui, escopadas a esses containers, tudo que está dentro (incluindo
   conteúdo inserido via JS depois, como o #notifContent) volta a usar as cores certas pro fundo
   escuro fixo, sem precisar caçar cada elemento individualmente. */
html[data-theme="light"] .modal,
html[data-theme="light"] .toast,
html[data-theme="light"] #notifPanel,
html[data-theme="light"] #tarefasBubblePanel,
html[data-theme="light"] .tmpl-editor,
html[data-theme="light"] #criarAdvModal > div,
html[data-theme="light"] #equipeMsgModal > div,
html[data-theme="light"] #criarVendedorModal > div,
html[data-theme="light"] #finDespesaModal > div,
html[data-theme="light"] #finFaturamentoModal > div,
html[data-theme="light"] #tfTituloDD,
html[data-theme="light"] .hero-banner {
  --bg:#0d1f0e; --card:rgba(255,255,255,.04); --card-hover:rgba(255,255,255,.07);
  --border:rgba(141,179,139,.13); --border-h:rgba(141,179,139,.3);
  --green3:#8db38b; --gold:#d4c2a2;
  --text:#f0f0eb; --text2:rgba(240,240,235,.62); --text3:rgba(240,240,235,.3);
  --ok-bg:rgba(74,122,76,.12); --ok-b:rgba(74,122,76,.3); --ok-t:#8db38b;
  --warn-bg:rgba(200,150,60,.12); --warn-b:rgba(200,150,60,.3); --warn-t:#d9b56a;
  --err:#e08a8a; --err-bg:rgba(200,70,70,.12); --err-b:rgba(200,70,70,.3); --err-t:#e08a8a;
}

/* <option> não herda variáveis CSS do mesmo jeito em todos os navegadores — fixa direto. */
html[data-theme="light"] .field-select option,
html[data-theme="light"] .mf-select option,
html[data-theme="light"] select.form-inp option {
  background:#0d1f0e !important; color:#f0f0eb !important;
}