/* Tema CLARO do X7IA. O escuro é o padrão definido em cada tela (:root).
   html[data-theme="claro"] tem especificidade maior que :root, então vence. */
html[data-theme="claro"] {
  --bg:#f4f5f7; --barra:#f0f2f5; --card:#ffffff; --linha:#e3e7ea;
  --txt:#111b21; --sub:#667781;
  --teal:#00a884; --verde:#0f9d58; --vermelho:#d93648; --azul:#1e7fd1; --amarelo:#b7791f;
  --bolha-user:#d9fdd3; --bolha-ia:#ffffff; --tick:#53bdeb;
}
html[data-theme="claro"] body { background:var(--bg); color:var(--txt); }
/* chat: papel de parede claro com os mesmos rabiscos, em escuro bem suave */
html[data-theme="claro"] .conversa {
  background-color:#f4f5f7;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='210' height='210'><g fill='none' stroke='%23000000' stroke-opacity='0.045' stroke-width='2' stroke-linecap='round'><circle cx='42' cy='46' r='13'/><path d='M158 28 v26 M145 41 h26'/><rect x='150' y='150' width='22' height='22' rx='5'/><path d='M28 158 q15 -22 30 0'/><circle cx='115' cy='112' r='6'/><path d='M95 190 h30'/></g><g fill='%23000000' fill-opacity='0.04' font-family='Arial, sans-serif' font-size='20' font-weight='bold'><text x='96' y='64'>R$</text><text x='60' y='196'>%</text></g></svg>");
}
html[data-theme="claro"] .bolha { box-shadow:0 1px 1px rgba(0,0,0,.08); }
html[data-theme="claro"] .pill { background:#ffffff; border:1px solid var(--linha); }
html[data-theme="claro"] .rnd { color:#ffffff; }
html[data-theme="claro"] .ic { color:#54656f; }
html[data-theme="claro"] .overlay .cx { background:#ffffff; color:var(--txt); }
html[data-theme="claro"] .cartao .acoes a, html[data-theme="claro"] .cartao .acoes button { border-color:var(--linha); }
html[data-theme="claro"] .tot, html[data-theme="claro"] .card, html[data-theme="claro"] .intro { box-shadow:0 1px 2px rgba(0,0,0,.06); }
/* relatório: trilho das barras e calendários */
html[data-theme="claro"] .bar { background:#e9edef; }
html[data-theme="claro"] .datas input[type=date] { color-scheme:light; }
/* dívidas/projetos/editar: campos de formulário */
html[data-theme="claro"] input, html[data-theme="claro"] select, html[data-theme="claro"] textarea { background:#ffffff; color:var(--txt); border-color:var(--linha); }
html[data-theme="claro"] .caixa { background:#ffffff; }
html[data-theme="claro"] .sit.a_negociar { background:rgba(217,54,72,.12); }
html[data-theme="claro"] .sit.negociando { background:rgba(183,121,31,.14); }
html[data-theme="claro"] .sit.quitada { background:rgba(15,157,88,.12); }
html[data-theme="claro"] .tag.despesa { background:rgba(217,54,72,.12); }
html[data-theme="claro"] .tag.receita { background:rgba(15,157,88,.12); }
html[data-theme="claro"] .tag.a_receber { background:rgba(183,121,31,.14); }
html[data-theme="claro"] .val.despesa, html[data-theme="claro"] .n.vermelho, html[data-theme="claro"] .saldo.neg { color:var(--vermelho); }
html[data-theme="claro"] .val.receita, html[data-theme="claro"] .n.verde, html[data-theme="claro"] .saldo.pos { color:var(--verde); }