/* marca_dentista.css — a mesma identidade do marca.css (02/10/2026): o painel do dentista novo e a casa
   falam a mesma língua visual. Este arquivo existe porque algumas telas (o /dra antigo, a gestora, o portal,
   o cadastro /nova) carregam esta folha e não o nav.js. Tema escuro anterior guardado no git. */
/* marca.css — A IDENTIDADE DO COMPARECE-IA · claro, no padrão do painel do dentista (02/10/2026).
   Pedido da Gi: "tudo que for do Comparece com a nova identidade que a gente criou junto".
   A referência é o painel do dentista novo (funcoes/dra/painel_novo.ts): fundo cinza-claro,
   cartão branco com borda fina, roxo #6941C6 só no que importa, letra Inter, texto que
   começa com maiúscula, sem emoji nos títulos e botões.
   ⛔ SÓ A PELE MUDA. Os NOMES de cor continuam os mesmos (--fundo, --caixa, --texto, --azul,
   --surface, --ink, --gi-*, --carta, --txt...): as telas pedem os mesmos nomes e ganham os
   valores novos, sem nenhuma regra de tela reescrita, sem nenhum dado ou botão mexido.
   Carregada pelo nav.js em todas as telas da casa (entra por último, então vale por cima).
   O tema escuro de 04/09 está guardado no git (commit anterior deste arquivo). */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Quicksand:wght@600;700&display=swap');

:root{
  /* ── a paleta do painel novo ── */
  --n-bg:#F4F5F8; --n-surface:#FFFFFF; --n-sunken:#F7F8FA; --n-line:#E4E7EC; --n-line2:#EEF0F3;
  --n-ink:#101828; --n-ink2:#344054; --n-muted:#667085; --n-faint:#98A2B3;
  --n-brand:#6941C6; --n-brand-h:#5B34B2; --n-brand-soft:#F4F0FF; --n-brand-line:#D9CCFF;
  --n-ok:#067647; --n-ok-bg:#ECFDF3; --n-ok-line:#ABEFC6;
  --n-warn:#B54708; --n-warn-bg:#FFFAEB; --n-warn-line:#FEDF89;
  --n-bad:#B42318; --n-bad-bg:#FEF3F2; --n-bad-line:#FECDCA;
  --n-info:#175CD3; --n-info-bg:#EFF8FF;
  --n-sh:0 1px 2px rgba(16,24,40,.05); --n-sh2:0 12px 24px -4px rgba(16,24,40,.12);

  /* ── os nomes da casa ── */
  --base:var(--n-bg); --fundo:var(--n-bg); --caixa:var(--n-surface); --superficie2:var(--n-sunken);
  --linha:var(--n-line); --texto:var(--n-ink); --fraco:var(--n-muted); --apagado:var(--n-muted);
  --azul:var(--n-brand); --azul-forte:var(--n-brand); --roxo:var(--n-brand);
  --verde:var(--n-ok); --vermelho:var(--n-bad); --amarelo:var(--n-warn); --ouro:var(--n-warn);
  --grad:linear-gradient(135deg,#6941C6,#7F56D9);
  --escura:rgba(16,24,40,.08); --clara:transparent;
  --ergue:var(--n-sh); --ergue-g:var(--n-sh2); --ergue-p:var(--n-sh);
  --afunda:none; --afunda-p:none; --convexo:var(--n-surface); --concavo:var(--n-sunken);

  /* ── os nomes do gi.css (prancha, anúncios, pixel) ── */
  --bg:var(--n-bg); --surface:var(--n-surface); --surface-2:var(--n-sunken);
  --border:var(--n-line); --border-soft:var(--n-line2);
  --ink:var(--n-ink); --ink-muted:var(--n-muted); --ink-faint:var(--n-muted);
  --primary:var(--n-brand); --primary-2:var(--n-brand); --primary-soft:var(--n-brand-soft); --primary-line:var(--n-brand-line);
  --success:var(--n-ok); --success-soft:var(--n-ok-bg); --warning:var(--n-warn); --warning-soft:var(--n-warn-bg);
  --shadow-sm:var(--n-sh); --shadow-md:var(--n-sh2); --radius:12px;

  /* ── os nomes do marca_dentista.css e do /dra antigo ── */
  --gi-bg:var(--n-bg); --gi-surface:var(--n-surface); --gi-surface-2:var(--n-sunken);
  --gi-border:var(--n-line); --gi-border-soft:var(--n-line2);
  --gi-ink:var(--n-ink); --gi-ink-muted:var(--n-muted); --gi-ink-faint:var(--n-muted);
  --gi-primary:var(--n-brand); --gi-primary-2:var(--n-brand); --gi-primary-soft:var(--n-brand-soft); --gi-primary-line:var(--n-brand-line);
  --gi-success:var(--n-ok); --gi-success-soft:var(--n-ok-bg); --gi-warning:var(--n-warn); --gi-warning-soft:var(--n-warn-bg);
  --gi-danger:var(--n-bad); --gi-shadow-sm:var(--n-sh); --gi-shadow-md:var(--n-sh2);
  --areia:var(--n-bg); --branco:var(--n-surface); --cafe:var(--n-ink); --cafe2:var(--n-muted);

  /* ── os nomes das telas de passos/resultados ── */
  --carta:var(--n-surface); --txt:var(--n-ink); --txt2:var(--n-muted); --verm:var(--n-bad);
}
html{background:var(--n-bg)}

body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif !important;
  background:var(--n-bg) !important;background-image:none !important;color:var(--n-ink);
  font-size:14px;-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:Inter,system-ui,sans-serif}

/* títulos: tom de sistema, sem caixa-alta, sempre começando com maiúscula */
h1{font-family:Inter,sans-serif !important;font-size:22px !important;font-weight:700;letter-spacing:-.01em;color:var(--n-ink)}
h2{font-family:Inter,sans-serif !important;font-size:15.5px !important;font-weight:600;
   text-transform:none !important;letter-spacing:0 !important;color:var(--n-ink)}
h3{font-family:Inter,sans-serif !important;color:var(--n-ink)}
h1::first-letter,h2::first-letter,h3::first-letter,button::first-letter,summary::first-letter,
label::first-letter,th::first-letter,.navlk::first-letter{text-transform:uppercase}
header{border-bottom:0 !important}
a{color:var(--n-brand)}
/* os números grandes dos placares */
.pl b,.etapa b,.chip b,.kpi b,.n b{font-weight:700 !important;letter-spacing:-.02em;color:var(--n-ink)}
.pl b,.etapa b,.chip b,.kpi b{font-size:26px !important}

/* ── a marca ───────────────────────────────────────────────────────── */
.marcaTopo{display:inline-flex;align-items:center;gap:10px;margin:0 18px 10px 0;text-decoration:none;vertical-align:middle}
.marcaTopo svg{display:block;width:26px;height:26px}
.marcaTopo .selo{width:38px;height:38px;border-radius:10px;background:var(--n-brand-soft);
  border:1px solid var(--n-brand-line);box-shadow:none;display:grid;place-items:center;flex:none}
.marcaTopo .palavra{font:700 15px/1 Inter,sans-serif;color:var(--n-ink);letter-spacing:-.01em}
.marcaTopo .palavra i{font-style:normal;color:var(--n-brand);background:none;-webkit-text-fill-color:currentColor}
.ondaVoz rect{fill:url(#gradOnda)}
@media (prefers-reduced-motion:no-preference){
  .ondaVoz rect{animation:pulsoVoz 2.4s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
  .ondaVoz rect:nth-child(2){animation-delay:.2s}.ondaVoz rect:nth-child(3){animation-delay:.4s}
  .ondaVoz rect:nth-child(4){animation-delay:.6s}.ondaVoz rect:nth-child(5){animation-delay:.8s}
}
@keyframes pulsoVoz{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}

/* ── navegação: barra branca, a tela aberta em roxo-claro ──────────── */
#navcasa{padding:10px 14px 6px !important;margin-bottom:16px;overflow:visible !important;white-space:normal !important;
  background:var(--n-surface);border:1px solid var(--n-line);border-radius:12px;box-shadow:var(--n-sh)}
#navcasa a.navlk,#navcasa summary{
  display:inline-block;background:transparent;border:1px solid transparent;border-radius:8px;
  padding:7px 12px;margin:0 4px 8px 0;font:500 13.5px Inter,sans-serif;color:var(--n-ink2);
  text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:none;transition:background .15s ease;list-style:none;
}
#navcasa a.navlk:hover,#navcasa summary:hover{background:var(--n-sunken);color:var(--n-ink)}
#navcasa a.navlk.on,#navcasa details[open] summary{background:var(--n-brand-soft);border-color:var(--n-brand-line);color:var(--n-brand);font-weight:600}
#navcasa summary::-webkit-details-marker{display:none}
#navcasa a.navlk.novo{position:relative}
#navcasa a.navlk.novo:after{content:"Novo";position:absolute;top:-8px;right:-6px;font-size:9.5px;font-weight:700;background:var(--n-brand);color:#fff;padding:2px 6px;border-radius:999px}
#navcasa details{display:inline-block;position:relative;background:none !important;border:0 !important;box-shadow:none !important;border-radius:0}
#navcasa details[open] > div{
  position:absolute;left:0;top:44px;z-index:60;background:var(--n-surface);border:1px solid var(--n-line);
  border-radius:12px;padding:8px;min-width:220px;box-shadow:var(--n-sh2);
}
#navcasa details[open] > div a.navlk{display:block;margin:0 0 2px;padding:8px 12px;border-radius:8px}
#navclinica{background:var(--n-surface) !important;border:1px solid var(--n-line) !important;color:var(--n-ink) !important;
  border-radius:8px !important;padding:8px 10px !important;box-shadow:var(--n-sh)}

/* ── filtro de produto ─────────────────────────────────────────────── */
.filtroModo{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 18px}
.filtroModo button{
  background:var(--n-surface);border:1px solid var(--n-line);color:var(--n-ink2);border-radius:8px;padding:7px 14px;
  font:600 13px Inter,sans-serif;cursor:pointer;margin:0;box-shadow:var(--n-sh);
}

/* ── botões: brancos com borda; o principal é o único roxo ──────────── */
button{border:1px solid var(--n-line);border-radius:8px;box-shadow:var(--n-sh);background:var(--n-surface);color:var(--n-ink2);font-weight:600}
:where(button:hover){background:var(--n-sunken)}
button:disabled{opacity:.55}

/* ── tabelas: cabeçalho cinza-claro, linhas finas ───────────────────── */
table{border-collapse:separate;border-spacing:0}
table td,table th{border-color:var(--n-line2) !important}
table th{background:#F9FAFB;color:var(--n-muted);font-weight:600}
tfoot td{background:transparent !important}
tr.clicavel:hover td{background:var(--n-sunken) !important}

:where(a,button,summary,input,select,textarea):focus-visible{outline:2px solid var(--n-brand);outline-offset:2px;border-radius:8px}
::selection{background:rgba(105,65,198,.18)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#D0D5DD;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#98A2B3}

/* ── ESTADO ATIVO, EM QUALQUER TELA: roxo-claro com letra roxa ─────── */
button.on,button.ativa,button.ativo,.aba.ativa,.chips button.on,.filtroModo button.on{
  background:var(--n-brand-soft) !important;border-color:var(--n-brand-line) !important;
  color:var(--n-brand) !important;font-weight:600;
}
/* interruptores: a cor É a informação (ligado/desligado) */
.sw.on{background:var(--n-brand) !important;box-shadow:none !important}
.sw{background:#D0D5DD !important;box-shadow:none !important}

/* ── cartões: branco, borda fina, sombra leve ───────────────────────── */
.aba.on,
.abas button,
.b-lead,
.bloco,
.campo,
.canal,
.card,
.cartao,
.chips button,
.cli,
.clinica,
.consulta,
.datas input,
.etapa,
.filtros button,
.funil .etapa,
.g-acoes button,
.g-envio input,
.grafico,
.ia,
.item,
.kpi,
.lig,
.peca,
.pl,
.t27,
.tpl-linha,
details,
table{
  background:var(--n-surface) !important;
  border:1px solid var(--n-line) !important;
  box-shadow:var(--n-sh);
  border-radius:12px;
}
/* barras de progresso: trilho cinza, preenchimento roxo */
.barra,.progresso,.trilho{background:var(--n-line2) !important;box-shadow:none !important;border-radius:999px}

/* ── campos: brancos, borda, foco roxo ──────────────────────────────── */
textarea, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select {
  background: var(--n-surface) !important; color: var(--n-ink) !important; border:1px solid #D0D5DD !important;
  border-radius:8px; box-shadow:var(--n-sh);
}
textarea:focus, input:focus, select:focus{border-color:var(--n-brand) !important;box-shadow:0 0 0 4px var(--n-brand-soft) !important;outline:none}
textarea::placeholder, input::placeholder { color: var(--n-faint); }

/* ── BOTÃO PRIMÁRIO: roxo sólido, letra branca ─────────────────────── */
button[type=submit],#login button,button[onclick*="entrar"],.botao:not(.fantasma),.aprovar{
  background:var(--n-brand) !important;color:#fff !important;border:1px solid var(--n-brand) !important}
button[type=submit]:hover,#login button:hover,.botao:not(.fantasma):hover,.aprovar:hover{background:var(--n-brand-h) !important}
.botao.fantasma{background:var(--n-surface) !important;color:var(--n-ink2) !important;border:1px solid var(--n-line) !important}

/* ═ cores cravadas em style= dentro do JS (do tema claro antigo e do escuro) ═
   Reapontadas pelo atributo, sem caçar linha por linha no código. */
[style*="#9E2440"]{color:var(--n-bad) !important}
[style*="#7a6c62"],[style*="#665F7E"],[style*="#9186B0" i]{color:var(--n-muted) !important}
[style*="#3f9d5f"],[style*="#17703F"],[style*="#3ED8A4" i]{color:var(--n-ok) !important}
[style*="#7E5600"],[style*="#E8AC53" i]{color:var(--n-warn) !important}
[style*="#FF6B7A" i]{color:var(--n-bad) !important}
[style*="#B76AFF" i]{color:var(--n-brand) !important}
[style*="color:#F3EEFF" i],[style*="color: #F3EEFF" i],[style*="color:#e6edf3" i]{color:var(--n-ink) !important}
[style*="background:#9E2440"],[style*="background: #9E2440"]{
  background:var(--n-bad-bg) !important;color:var(--n-bad) !important;border:1px solid var(--n-bad-line) !important}
[style*="background:#3f9d5f"],[style*="background: #3f9d5f"]{
  background:var(--n-ok-bg) !important;color:var(--n-ok) !important;border:1px solid var(--n-ok-line) !important}
[style*="background:var(--azul)"],[style*="background: var(--azul)"]{background:var(--n-brand) !important;color:#fff !important}
/* caixas escuras cravadas (tema de 04/09) e claras antigas (lavanda, menta, creme): viram superfície clara */
[style*="background:#20153A" i],[style*="background: #20153A" i]{background:var(--n-brand-soft) !important;color:var(--n-ink) !important;border-color:var(--n-brand-line) !important}
[style*="background:#120C1F" i],[style*="background:#1B1129" i],[style*="background:#08060F" i],[style*="background:#161b22" i],[style*="background:#0d1714" i]{
  background:var(--n-sunken) !important;color:var(--n-ink) !important}
[style*="background:#E6E3F0" i],[style*="background: #E6E3F0" i],[style*="background:#DCD8EA" i],
[style*="background:#DFF3E8" i],[style*="background: #DFF3E8" i],[style*="background:#FBF0DA" i]{
  background:var(--n-sunken) !important;color:var(--n-ink) !important;
}

/* ── peças que moravam só no marca_dentista.css (o /dra antigo, a gestora, o portal) ── */
#login{background:var(--n-bg) !important}
#login .card{background:var(--n-surface) !important;border:1px solid var(--n-line) !important;box-shadow:var(--n-sh2) !important;border-radius:14px}
#login h1{color:var(--n-ink)}
#login .sub{color:var(--n-muted)}
.ligItem,.ligCard,.qgItem,.luz,.coluna{background:var(--n-surface) !important;border:1px solid var(--n-line) !important;box-shadow:var(--n-sh) !important;border-radius:12px}
.linkinho{background:none !important;border:0 !important;box-shadow:none !important;color:var(--n-brand) !important}
.sw::after{background:#fff !important;box-shadow:0 1px 3px rgba(16,24,40,.25) !important}
.aba{background:var(--n-surface) !important;border:1px solid var(--n-line) !important;border-radius:8px;color:var(--n-ink2) !important;box-shadow:var(--n-sh) !important}
.aba:hover{background:var(--n-sunken) !important}
.aba.ativa{background:var(--n-brand-soft) !important;border-color:var(--n-brand-line) !important;color:var(--n-brand) !important;font-weight:600}
.etapaBt{background:var(--n-surface) !important;border:1px solid var(--n-line) !important;box-shadow:var(--n-sh) !important}
.etapaBt.on{background:var(--n-brand-soft) !important;border-color:var(--n-brand) !important}
.etapaBt.on .eNome{color:var(--n-brand) !important}
.etapaCond{background:var(--n-warn-bg) !important;color:var(--n-ink) !important}
.selo27.s-ok{border-color:var(--n-ok-line) !important;color:var(--n-ok) !important;background:var(--n-ok-bg) !important}
.selo27.s-falta{border-color:var(--n-bad-line) !important;color:var(--n-bad) !important;background:var(--n-bad-bg) !important}
.selo27.s-espera{border-color:var(--n-warn-line) !important;color:var(--n-warn) !important;background:var(--n-warn-bg) !important}
.kpi b{color:var(--n-ink) !important}
.kpi.destaque b{color:var(--n-warn) !important}
.bolinha{background:var(--n-faint)}
.bolinha.ok{background:var(--n-ok);box-shadow:none}
.bolinha.off{background:var(--n-bad);box-shadow:none}
.transc{background:var(--n-sunken) !important;color:var(--n-ink)}
.cartao:hover{background:var(--n-sunken) !important}
.midiaBox,.calEditor{border-color:var(--n-line) !important}
hr{border-color:var(--n-line)}
.av{background:var(--n-brand-soft) !important;color:var(--n-brand) !important;border:1px solid var(--n-brand-line) !important}
#tarja_quem{background:var(--n-brand) !important;color:#fff !important}
#tarja_quem button{background:rgba(255,255,255,.18) !important;color:#fff !important;border:0 !important}
.progress-bar > div,.barra > div,[id$="Barra"] > div{background:var(--n-brand) !important}
/* ── caixas cravadas no código da gestora e do fluxo (as provas leem essas cores no código;
   a tela é que mostra no claro) ── */
[style*="background:#132C24" i]{background:var(--n-ok-bg) !important;color:var(--n-ok) !important;border-color:var(--n-ok-line) !important}
[style*="background:rgba(255,107,122,.14)"]{background:var(--n-bad-bg) !important;color:var(--n-bad) !important;border-color:var(--n-bad-line) !important}
[style*="background:rgba(232,172,83,.12)"]{background:var(--n-warn-bg) !important;color:var(--n-ink) !important;border-color:var(--n-warn-line) !important}
[style*="border:1px solid #3C2B63" i]{border-color:#D0D5DD !important}
[style*="rgba(255,107,122,.45)"]{border-color:var(--n-bad-line) !important}
.dela{background:#F2F4F7 !important;color:var(--n-ink) !important}
.nossa{background:var(--n-brand-soft) !important;color:var(--n-ink) !important}
.txt{background:var(--n-sunken) !important;color:var(--n-ink) !important}
#gaveta{background:var(--n-surface) !important;color:var(--n-ink)}

/* ── O MENU NA LATERAL (02/10, igual ao painel do dentista) ─────────────
   O nav.js monta #sideCasa e marca o body com .com-lateral; a barra antiga (#navcasa) some. */
body.com-lateral{margin-left:304px !important;padding-left:28px !important;padding-right:28px !important;max-width:none !important}
body.com-lateral #navcasa{display:none !important}
#sideCasa{position:fixed;left:0;top:0;bottom:0;width:304px;background:var(--n-surface);border-right:1px solid var(--n-line);
  display:flex;flex-direction:column;overflow-y:auto;z-index:40;font-family:Inter,system-ui,sans-serif}
#sideCasa .sc-marca{padding:16px 16px 10px;border-bottom:1px solid var(--n-line2)}
#sideCasa .sc-marca .marcaTopo{margin:0}
#sideCasa .sc-sub{display:block;font-size:12px;color:var(--n-muted);margin:6px 0 0 48px}
#sideCasa #scSel{padding:0 12px}
#sideCasa #navclinica{width:100%;margin:12px 0 0 !important}
#sideCasa .sc-nav{padding:8px 14px 24px;display:flex;flex-direction:column;gap:3px}
#sideCasa .sc-sec{font-size:12px;font-weight:600;color:var(--n-faint);padding:14px 10px 6px}
#sideCasa .sc-it{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;color:var(--n-ink2);
  font-size:14px;font-weight:500;text-decoration:none;line-height:1.25}
#sideCasa .sc-it:hover{background:var(--n-sunken);color:var(--n-ink)}
#sideCasa .sc-it.on{background:var(--n-brand-soft);color:var(--n-ink);font-weight:600}
#sideCasa .sc-ic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--n-sunken);color:var(--n-ink2)}
#sideCasa .sc-it.on .sc-ic{background:var(--n-brand);color:#fff}
#sideCasa .sc-ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#sideCasa .sc-novo{margin-left:auto;font-size:10.5px;font-weight:700;background:var(--n-brand);color:#fff;padding:1px 7px;border-radius:999px}
@media (max-width:1000px){
  body.com-lateral{margin-left:0 !important;padding-left:14px !important;padding-right:14px !important}
  #sideCasa{position:static;width:auto;border-right:0;border-bottom:1px solid var(--n-line);margin:0 -14px 14px}
  #sideCasa .sc-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;padding:6px 10px 10px}
  #sideCasa .sc-sec{display:none}
  #sideCasa .sc-it{white-space:nowrap}
}

/* ── A LOGO DA GI (02/10): o C roxo com a onda de voz, o fio com o ponto e COMPARECE.IA.
   No fundo claro o nome vai em grafite e o .IA no roxo da marca. ── */
.marcaTopo{gap:0 !important;align-items:center}
.marcaTopo .selo{width:auto !important;height:auto !important;background:none !important;border:0 !important;border-radius:0 !important}
.marcaTopo svg{width:34px !important;height:34px !important}
.marcaTopo .liga{position:relative;display:inline-block;width:12px;height:2px;background:#7C3AED;margin:0 7px 0 1px;flex:none}
.marcaTopo .liga::after{content:"";position:absolute;right:-6px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:#fff;border:2px solid #7C3AED;box-sizing:border-box}
.marcaTopo .palavra{font:700 15.5px/1 Quicksand,Inter,sans-serif !important;letter-spacing:.07em;color:#1D2939 !important;margin-left:4px}
.marcaTopo .palavra i{font-style:normal;color:#7C3AED !important;-webkit-text-fill-color:#7C3AED}
#sideCasa .sc-sub{margin:6px 0 0 0 !important}

/* ── 03/10 (Gi): o menu um tom mais escuro que o branco, e o botão de modo escuro no pé dele ── */
#sideCasa{background:#F3F2F8 !important;border-right-color:#E2E0EC !important}
#sideCasa .sc-marca{border-bottom-color:#E2E0EC !important}
#sideCasa .sc-it:hover{background:#EAE8F2 !important}
#sideCasa .sc-it.on{background:#FFFFFF !important;box-shadow:inset 3px 0 0 var(--n-brand),0 1px 2px rgba(16,24,40,.06)}
#sideCasa .sc-ic{background:#FFFFFF !important;border:1px solid #E2E0EC}
#sideCasa .sc-it.on .sc-ic{border-color:var(--n-brand)}
#sideCasa .sc-pe{margin-top:auto;padding:12px 14px 16px;border-top:1px solid #E2E0EC}
#sideCasa #scTema{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:#FFFFFF;border:1px solid #E2E0EC;
  border-radius:9px;padding:9px 12px;font:600 13px Inter,sans-serif;color:var(--n-ink2);cursor:pointer;box-shadow:none}
#sideCasa #scTema:hover{background:#EAE8F2}
#sideCasa #scTema svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── MODO ESCURO das telas da Gi: a tela inteira inverte em tons neutros (o roxo continua roxo);
   foto, vídeo e a logo voltam às cores reais. Os tons de base são ajustados antes da inversão
   para o fundo ficar grafite (não preto puro) e os cartões um pouco acima do fundo. ── */
html[data-tema="escuro"]{filter:invert(1) hue-rotate(180deg);background:#fff}
html[data-tema="escuro"] img,html[data-tema="escuro"] video,html[data-tema="escuro"] canvas,html[data-tema="escuro"] iframe,
html[data-tema="escuro"] picture,html[data-tema="escuro"] [style*="background-image"],html[data-tema="escuro"] .marcaTopo svg{filter:invert(1) hue-rotate(180deg)}
html[data-tema="escuro"]{--n-bg:#EDEDF0;--n-surface:#E3E3E8;--n-sunken:#DADAE0;--n-line:#C9C9D2;--n-line2:#D3D3DA;
  --n-brand-soft:#E2DCF2;--n-sh:none;--n-sh2:0 12px 24px -4px rgba(0,0,0,.08)}
html[data-tema="escuro"] #sideCasa{background:#E7E6EC !important;border-right-color:#CFCED8 !important}
html[data-tema="escuro"] #sideCasa .sc-it.on,html[data-tema="escuro"] #sideCasa .sc-ic,html[data-tema="escuro"] #sideCasa #scTema{background:#DCDBE3 !important;border-color:#CFCED8}
html[data-tema="escuro"] body{background:var(--n-bg) !important}

/* 05/10 (Gi: "quando vou pra uma tela o símbolo some"): o ícone da tela aberta é roxo com o desenho branco */
#sideCasa .sc-it.on .sc-ic{background:var(--n-brand) !important;color:#fff !important;border-color:var(--n-brand) !important}
html[data-tema="escuro"] #sideCasa .sc-it.on .sc-ic{background:var(--n-brand) !important;color:#fff !important}
/* 05/10 (Gi: "ainda está muito branco, um tom um pouquinho mais escuro pra não cansar a vista"):
   fundo um tom abaixo, cartões levemente fora do branco puro, menu acompanhando. Sem exagero. */
:root{--n-bg:#ECEEF2;--n-surface:#FCFCFD;--n-sunken:#F3F4F7;--n-line:#E1E4EA}
html{background:#ECEEF2}
#sideCasa{background:#ECEBF2 !important;border-right-color:#DCDAE6 !important}
#sideCasa .sc-marca,#sideCasa .sc-pe{border-color:#DCDAE6 !important}
#sideCasa .sc-it:hover{background:#E3E1EC !important}
#sideCasa .sc-it.on,#sideCasa .sc-ic,#sideCasa #scTema{background:#FCFCFD !important}
#sideCasa .sc-it.on .sc-ic{background:var(--n-brand) !important}