/* =========================================================
   SKINS GEFOSCAL — extraído do Planner (planner-666d.vercel.app)
   Três variações de tema controladas por [data-skin] na tag <html>.
   Troque com: document.documentElement.setAttribute('data-skin', 'plataforma')
   ========================================================= */

/* SOFISTICADO — tema padrão, tom terroso/dourado, fonte serifada.
   Uso sugerido: telas internas de diretoria/uso geral. */
:root,
html[data-skin="sofisticado"] {
  --bg: #15130F;
  --panel: #1A1710;
  --card: #1E1B15;
  --line: #332D22;
  --line2: #4A4230;
  --surface2: #191510;
  --surface3: #12100C;
  --rust: #C46B3E;
  --gold: #D8A857;
  --txt: #EFE9DD;
  --dim: #ACA290;
  --dim2: #8A8068;
  --btn-text: #1A140D;
  --gradient1: #3A2A1C;
  --gradient2: #1C1710;
  --gradient-border: #4A3624;
  --icon-off: #52493A;
  --navsec: #4C4535;
  --dot-off: #3A3428;
  --warn-text: #E08C5C;
  --good-text: #9CB98C;
  --overbudget-bg: #8C3B22;
  --hover-bg: #232016;
  --on-surface: 255, 255, 255;
  --rust-rgb: 196, 107, 62;
  --gold-rgb: 216, 168, 87;
  --dim-rgb: 172, 162, 144;
  --good-rgb: 156, 185, 140;
  --warn-rgb: 224, 140, 92;
  --serif: 'Fraunces', 'Roboto', system-ui, sans-serif;
}

/* PLATAFORMA — tema escuro azul/teal, fonte sem serifa.
   Uso sugerido: telas operacionais (expedição, estoque, manutenção). */
html[data-skin="plataforma"] {
  --bg: #071020;
  --panel: #0B1524;
  --card: #101C2E;
  --line: #1B2942;
  --line2: #22385C;
  --surface2: #0C1830;
  --surface3: #081222;
  --rust: #5AA9FF;
  --gold: #3DDC97;
  --txt: #E8EEF7;
  --dim: #8BA0BD;
  --dim2: #5B7191;
  --btn-text: #071020;
  --gradient1: #12233F;
  --gradient2: #0B1524;
  --gradient-border: #22385C;
  --icon-off: #2C4468;
  --navsec: #3C587F;
  --dot-off: #22385C;
  --warn-text: #FFB547;
  --good-text: #3DDC97;
  --overbudget-bg: #7A1F33;
  --hover-bg: #152640;
  --on-surface: 255, 255, 255;
  --rust-rgb: 90, 169, 255;
  --gold-rgb: 61, 220, 151;
  --dim-rgb: 139, 160, 189;
  --good-rgb: 61, 220, 151;
  --warn-rgb: 255, 181, 71;
  --serif: 'Fraunces', 'Roboto', system-ui, sans-serif;
}

/* DAYLIGHT — tema claro, tom creme/dourado, fonte serifada.
   Uso sugerido: modo claro / impressão / preferência pessoal. */
html[data-skin="daylight"] {
  --bg: #F7F4EC;
  --panel: #FFFFFF;
  --card: #FFFFFF;
  --line: #E3DCC9;
  --line2: #DED4BC;
  --surface2: #F0EBDD;
  --surface3: #E9E2CF;
  --rust: #B85C2E;
  --gold: #9C7A16;
  --txt: #241F17;
  --dim: #6B6152;
  --dim2: #8C8271;
  --btn-text: #FFF7EE;
  --gradient1: #F3E4D2;
  --gradient2: #FBF8F1;
  --gradient-border: #E7D8BE;
  --icon-off: #C9C0A8;
  --navsec: #A79C82;
  --dot-off: #D8D0B9;
  --warn-text: #A9601E;
  --good-text: #3F7D4A;
  --overbudget-bg: #F0C9B8;
  --hover-bg: #F0EADA;
  --on-surface: 0, 0, 0;
  --rust-rgb: 184, 92, 46;
  --gold-rgb: 156, 122, 22;
  --dim-rgb: 107, 97, 82;
  --good-rgb: 63, 125, 74;
  --warn-rgb: 169, 96, 30;
  --serif: 'Fraunces', 'Roboto', system-ui, sans-serif;
}

/* =========================================================
   BASE — estilos genéricos de componente usando os tokens acima.
   Isso NÃO veio do Planner (o Planner usa um framework próprio
   de componentes); é uma proposta de ponto de partida para o
   frontend novo, já ligada às três skins.
   ========================================================= */

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'Roboto', system-ui, sans-serif;
  margin: 0;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.card:hover {
  background: var(--hover-bg);
  border-color: var(--line2);
}

.titulo-serif {
  font-family: var(--serif);
  color: var(--txt);
}

.texto-dim { color: var(--dim); }
.texto-dim2 { color: var(--dim2); }

.btn {
  background: var(--rust);
  color: var(--btn-text);
  border: none;
  border-radius: 7px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  transition: opacity .15s ease, transform .1s ease, box-shadow .15s ease;
}

.btn:hover { opacity: 0.92; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.16); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secundario {
  background: transparent;
  color: var(--txt);
  border: 1px solid var(--line2);
  border-radius: 7px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn-secundario:hover { background: var(--hover-bg); border-color: var(--rust); color: var(--rust); }
.btn-secundario:disabled { opacity: .5; cursor: not-allowed; }

input, select, textarea {
  background: var(--surface2);
  color: var(--txt);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 10px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgba(var(--rust-rgb), .16);
}

input::placeholder, textarea::placeholder { color: var(--dim2); }

.badge-bom {
  color: var(--good-text);
  background: rgba(var(--good-rgb), .14);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: .92em;
}
.badge-alerta {
  color: var(--warn-text);
  background: rgba(var(--warn-rgb), .14);
  border-radius: 20px;
  padding: 2px 9px;
  font-size: .92em;
}
.badge-estourado {
  background: var(--overbudget-bg);
  color: var(--txt);
  border-radius: 20px;
  padding: 2px 9px;
}

.linha-divisoria { border-top: 1px solid var(--line); }
.linha-divisoria-forte { border-top: 1px solid var(--line2); }

/* =========================================================
   REFINAMENTO POR SKIN — profundidade e hierarquia visual que
   os tokens sozinhos não davam. Cada bloco só usa var() da própria
   skin, então continua funcionando se as cores mudarem.
   ========================================================= */

/* ---- PLATAFORMA — terminal de mercado (referência: Moscca Terminal) ----
   Cards com profundidade de verdade, números grandes e firmes, tabela
   com cabeçalho mais escuro que o corpo, botões com leve halo na cor
   de destaque — o "peso" que um terminal financeiro pede. */
html[data-skin="plataforma"] body {
  background-image: radial-gradient(ellipse 1200px 800px at 15% -10%, rgba(var(--rust-rgb),.05), transparent 60%);
  background-attachment: fixed;
}
html[data-skin="plataforma"] .card,
html[data-skin="plataforma"] .panel {
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.5);
  background-image: linear-gradient(180deg, rgba(255,255,255,.02), transparent 45%);
}
html[data-skin="plataforma"] .kpi { border-top: 2px solid rgba(var(--rust-rgb),.4); padding-top:14px; }
html[data-skin="plataforma"] .kpi .rotulo { letter-spacing: .09em; }
html[data-skin="plataforma"] .kpi .valor { font-weight: 700; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
html[data-skin="plataforma"] .btn {
  box-shadow: 0 2px 14px -2px rgba(var(--rust-rgb),.45);
  font-weight: 700;
}
html[data-skin="plataforma"] table th {
  background: var(--surface3);
  border-bottom: 1px solid var(--line2);
}
html[data-skin="plataforma"] .nav { box-shadow: 4px 0 24px -8px rgba(0,0,0,.5); }
html[data-skin="plataforma"] .nav a.ativo { background: rgba(var(--rust-rgb),.12); }
html[data-skin="plataforma"] .modal { box-shadow: 0 24px 64px -12px rgba(0,0,0,.6); }
html[data-skin="plataforma"] .badge-bom, html[data-skin="plataforma"] .badge-alerta,
html[data-skin="plataforma"] .tag-aging, html[data-skin="plataforma"] .status, html[data-skin="plataforma"] .chip {
  font-weight: 600; letter-spacing: .02em;
}

/* ---- SOFISTICADO — editorial, como no Planner pessoal ----
   Serifada em destaque nos títulos e rótulos de KPI (itálico fino,
   cor dourada), cards mais soltos e com sombra suave e quente,
   divisórias com leve traço dourado em vez de cinza puro. */
html[data-skin="sofisticado"] .card,
html[data-skin="sofisticado"] .panel {
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
html[data-skin="sofisticado"] .kpi .rotulo {
  font-family: var(--serif); font-size: 12px; letter-spacing: .02em;
  text-transform: none; font-style: italic; color: var(--gold);
}
html[data-skin="sofisticado"] .kpi .valor { font-weight: 600; letter-spacing: -.01em; }
html[data-skin="sofisticado"] h2, html[data-skin="sofisticado"] h3 { letter-spacing: -.008em; }
html[data-skin="sofisticado"] .linha-divisoria { border-top-color: var(--line2); }
html[data-skin="sofisticado"] .subabas button.ativo,
html[data-skin="sofisticado"] .chips-cred button.ativo { font-family: var(--serif); font-style: italic; }
html[data-skin="sofisticado"] .nav a.ativo { border-left-color: var(--gold); }
html[data-skin="sofisticado"] .modal h3 { font-style: italic; }

/* ---- DAYLIGHT — claro, sombra difusa e leve, selo de estado à esquerda ----
   Tema claro pede sombra mais discreta (sombra forte em fundo claro
   fica pesada) e um sinalizador de cor mais presente, já que o fundo
   claro absorve menos contraste que o escuro. */
html[data-skin="daylight"] .card,
html[data-skin="daylight"] .panel {
  box-shadow: 0 1px 2px rgba(30,25,10,.05), 0 4px 14px -6px rgba(30,25,10,.08);
}
html[data-skin="daylight"] .kpi { border-left: 3px solid var(--rust); padding-left: 13px; }
html[data-skin="daylight"] table th { background: var(--surface2); }
html[data-skin="daylight"] .btn { box-shadow: 0 2px 8px -2px rgba(var(--rust-rgb),.35); }
html[data-skin="daylight"] .nav { box-shadow: 2px 0 10px -4px rgba(30,25,10,.08); }

/* ---- PLATAFORMA CLARO — conteúdo claro, cards com destaque à esquerda,
   sombra discreta tipo FinanceAI. ---- */
html[data-skin="plataforma-claro"] .card,
html[data-skin="plataforma-claro"] .panel {
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px -6px rgba(16,24,40,.08);
}
html[data-skin="plataforma-claro"] .kpi { border-left: 3px solid var(--rust); padding-left: 14px; }
html[data-skin="plataforma-claro"] .kpi .rotulo { letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }
html[data-skin="plataforma-claro"] .kpi .valor { font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
html[data-skin="plataforma-claro"] table th { background: var(--surface2); border-bottom: 1px solid var(--line2); }
html[data-skin="plataforma-claro"] .btn { box-shadow: 0 2px 10px -2px rgba(37,99,235,.35); font-weight: 600; }
html[data-skin="plataforma-claro"] .modal { box-shadow: 0 24px 64px -12px rgba(16,24,40,.25); }

/* ---- GREY — mesmo espírito do Sofisticado (rótulos de KPI em serifa
   itálica dourada), só que em fundo neutro cinza-chumbo em vez de
   terroso. Copiado do protótipo "Meu Dia". ---- */
html[data-skin="grey"] .card,
html[data-skin="grey"] .panel {
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 20px -12px rgba(0,0,0,.45);
}
html[data-skin="grey"] .kpi .rotulo {
  font-family: var(--serif); font-size: 12px; letter-spacing: .02em;
  text-transform: none; font-style: italic; color: var(--gold);
}
html[data-skin="grey"] .kpi .valor { font-weight: 600; letter-spacing: -.01em; }
html[data-skin="grey"] table th {
  background: var(--surface3);
  border-bottom: 1px solid var(--line2);
}
html[data-skin="grey"] .nav a.ativo { border-left-color: var(--gold); }
html[data-skin="grey"] .modal h3 { font-style: italic; }

/* menu lateral herda o escuro do Plataforma (referência: FinanceAI/Viver de
   IA — menu fixo escuro + conteúdo claro). Tudo que mora dentro do .nav
   precisa de cor própria aqui, porque os tokens da skin (pensados pro
   conteúdo claro) deixariam texto escuro sobre fundo escuro. */
html[data-skin="plataforma-claro"] .nav {
  background: #0B1524;
  border-right: none;
  box-shadow: 4px 0 24px -8px rgba(0,0,0,.35);
}
html[data-skin="plataforma-claro"] .nav h1 { color: #F3F6FB; }
html[data-skin="plataforma-claro"] .nav .sub { color: #7C90AF; }
html[data-skin="plataforma-claro"] .nav a { color: #B7C4DA; }
html[data-skin="plataforma-claro"] .nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
html[data-skin="plataforma-claro"] .nav a.ativo { background: rgba(90,169,255,.18); color: #fff; border-left-color: #5AA9FF; }
html[data-skin="plataforma-claro"] .nav a.bloqueado { opacity: .28; }
html[data-skin="plataforma-claro"] .nav .linha-divisoria { border-top-color: rgba(255,255,255,.1); }
html[data-skin="plataforma-claro"] .nav .inicial { background: rgba(255,255,255,.08); color: #E8EEF7; }
html[data-skin="plataforma-claro"] .perfil-nav-dados .nome { color: #F3F6FB; }
/* o cartão do perfil usa --surface2 (quase branco nesse tema) — sem isso,
   o nome (que já é quase branco, pensado pro fundo escuro do menu) some */
html[data-skin="plataforma-claro"] .nav .perfil-nav { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
/* "CRM" (e qualquer outro grupo pai) é um <div>, não <a> — a regra de cor
   clara do menu só cobre <a>, então esses ficavam com a cor escura padrão
   do tema (pensada pro conteúdo claro) sobre o fundo escuro do menu */
html[data-skin="plataforma-claro"] .nav .item-pai { color: #B7C4DA; }
html[data-skin="plataforma-claro"] .nav .item-pai:hover,
html[data-skin="plataforma-claro"] .nav .item-pai.tem-ativo { color: #fff; background: rgba(255,255,255,.06); }
html[data-skin="plataforma-claro"] .nav .selo { border-color: rgba(255,255,255,.2); color: #9CACC6; }
html[data-skin="plataforma-claro"] .nav .selo.forte { border-color: #5AA9FF; color: #5AA9FF; background: rgba(90,169,255,.15); }
html[data-skin="plataforma-claro"] .nav #btn-sair,
html[data-skin="plataforma-claro"] .nav #btn-instalar { border-color: rgba(255,255,255,.16); color: #C7D2E3; }
html[data-skin="plataforma-claro"] .nav #btn-sair:hover,
html[data-skin="plataforma-claro"] .nav #btn-instalar:hover { background: rgba(255,255,255,.06); border-color: #5AA9FF; color: #fff; }

/* PLATAFORMA CLARO — mesma família de cor do Plataforma (azul/mint), só que
   em modo claro: menu lateral escuro herdado do Plataforma + área de
   conteúdo branca. Referência: dashboards tipo FinanceAI/Viver de IA —
   menu escuro fixo, cards brancos com KPI de destaque à esquerda.
   Uso sugerido: quem já usa Plataforma mas prefere ler em fundo claro. */
html[data-skin="plataforma-claro"] {
  --bg: #EEF2F8;
  --panel: #FFFFFF;
  --card: #FFFFFF;
  --line: #E1E7F0;
  --line2: #C9D3E3;
  --surface2: #F1F4F9;
  --surface3: #E7ECF3;
  --rust: #2563EB;
  --gold: #0E9F6E;
  --txt: #101828;
  --dim: #57647B;
  --dim2: #8894A8;
  --btn-text: #FFFFFF;
  --gradient1: #DCE7FB;
  --gradient2: #FFFFFF;
  --gradient-border: #C9D9F5;
  --icon-off: #C3CCDC;
  --navsec: #94A3BC;
  --dot-off: #D3DBE8;
  --warn-text: #B45309;
  --good-text: #0E9F6E;
  --overbudget-bg: #FBD5D5;
  --hover-bg: #EAF1FE;
  --on-surface: 0, 0, 0;
  --rust-rgb: 37, 99, 235;
  --gold-rgb: 14, 159, 110;
  --dim-rgb: 87, 100, 123;
  --good-rgb: 14, 159, 110;
  --warn-rgb: 180, 83, 9;
  --serif: 'Fraunces', 'Roboto', system-ui, sans-serif;
}

/* GREY — copiada do protótipo meu_dia_prototipo.html ("Meu Dia").
   Fundo neutro cinza-chumbo (não terroso, não azulado), com os mesmos
   acentos rust/dourado do Sofisticado. Fonte igual à das outras skins
   (Roboto, mesmo padrão da Plataforma) — o protótipo original usava
   Fraunces nos títulos, mas foi trocado pra manter consistência com
   o resto do sistema.
   As variáveis abaixo marcadas foram copiadas 1:1 do :root do protótipo:
   bg, panel, card, surface2, line, line2, txt, dim, dim2, hover-bg,
   rust(+rgb), gold(+rgb), good-text(+rgb), warn-text(+rgb).
   O protótipo não definia surface3, btn-text, gradient1/2/border,
   icon-off, navsec, dot-off, overbudget-bg, on-surface e dim-rgb —
   esses foram derivados na mesma lógica das outras skins (ex.: dot-off
   e gradient-border ficam na cor de line2; btn-text fica igual ao bg,
   como na Plataforma, já que o rust daqui tem o mesmo brilho do
   Sofisticado). Uso sugerido: quem quer o acento do Sofisticado sem o
   fundo terroso. */
html[data-skin="grey"] {
  --bg: #10151A;
  --panel: #171E24;
  --card: #1B232A;
  --line: rgba(255, 255, 255, .07);
  --line2: rgba(255, 255, 255, .15);
  --surface2: #1E262D;
  --surface3: #0C1014;
  --rust: #C1693C;
  --gold: #C9A227;
  --txt: #EEF2F0;
  --dim: #9FB0AA;
  --dim2: #6C7D77;
  --btn-text: #10151A;
  --gradient1: #232B33;
  --gradient2: #171E24;
  --gradient-border: #34383C;
  --icon-off: #3E464C;
  --navsec: #4A555D;
  --dot-off: #34383C;
  --warn-text: #D9A441;
  --good-text: #57B981;
  --overbudget-bg: #7C3220;
  --hover-bg: rgba(255, 255, 255, .045);
  --on-surface: 255, 255, 255;
  --rust-rgb: 193, 105, 60;
  --gold-rgb: 201, 162, 39;
  --dim-rgb: 159, 176, 170;
  --good-rgb: 87, 185, 129;
  --warn-rgb: 217, 164, 65;
  --serif: 'Fraunces', 'Roboto', system-ui, sans-serif;
}

/* =========================================================
   Campo de seleção com busca (combo-busca)

   Substitui visualmente o <select> nativo, que só localiza pelo
   começo do texto. O select continua ali, escondido, guardando o
   valor — quem lê .value no JavaScript não percebe diferença.

   Tudo aqui usa as variáveis de tema, então funciona igual nas
   cinco skins (sofisticado, plataforma, plataforma-claro, grey,
   daylight) sem nenhuma cor fixa.
   ========================================================= */

.combo-busca {
  position: relative;
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 120px;
}

/* o select de verdade: presente no DOM, invisível na tela */
.combo-busca > select { display: none !important; }

.combo-busca > .combo-campo {
  width: 100%;
  padding-right: 28px;          /* espaço da setinha */
  text-overflow: ellipsis;
  cursor: pointer;
}
.combo-busca.aberto > .combo-campo { cursor: text; }
.combo-busca.desabilitado > .combo-campo { opacity: .55; cursor: not-allowed; }

/* setinha desenhada em CSS, no mesmo lugar da do select nativo */
.combo-busca > .combo-seta {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.6px solid var(--dim2);
  border-bottom: 1.6px solid var(--dim2);
  transform: rotate(45deg);
  transition: transform .15s ease, border-color .15s ease;
  cursor: pointer;
}
.combo-busca.aberto > .combo-seta {
  transform: rotate(-135deg);
  margin-top: -2px;
  border-color: var(--rust);
}
.combo-busca.desabilitado > .combo-seta { opacity: .4; cursor: not-allowed; }

/* a lista fica no <body> e é posicionada por JavaScript, pra não
   ser cortada pelo overflow dos modais e das tabelas roláveis */
.combo-lista {
  position: fixed;
  z-index: 9999;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
  padding: 4px;
  font-size: 13.5px;
}

.combo-lista .combo-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--txt);
}
.combo-lista .combo-item:hover { background: var(--hover-bg); }
.combo-lista .combo-item.marcado {
  background: rgba(var(--rust-rgb), .16);
  color: var(--rust);
}
.combo-lista .combo-item[aria-selected="true"] .combo-nome { font-weight: 600; }
.combo-lista .combo-item.inativo { opacity: .45; cursor: not-allowed; }

.combo-lista .combo-nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* segunda linha: CNPJ, contato, município — o que vier em data-info */
.combo-lista .combo-info {
  font-size: 11.5px;
  color: var(--dim2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combo-lista .combo-item.marcado .combo-info { color: var(--rust); opacity: .8; }

/* trecho encontrado, em qualquer posição e em qualquer um dos termos */
.combo-lista mark {
  background: rgba(var(--gold-rgb), .30);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}

.combo-lista .combo-vazio {
  padding: 10px;
  color: var(--dim2);
  font-size: 12.5px;
}

/* no celular a lista ganha um respiro maior no toque */
@media (max-width: 720px) {
  .combo-lista .combo-item { padding: 10px 12px; }
}

/* =========================================================
   CRM COMERCIAL — refinamento visual (pedido da Amanda, 29/09).

   Escopo: TUDO aqui é prefixado com #crm-shell, o container que
   embrulha as sub-abas do CRM Comercial (Painel, Funil, Progresso,
   Gestão etc. — ver abrirCrmModulo() no index.html). Fora dessa
   área, nada muda: nenhum outro módulo do sistema (financeiro,
   expedição, manutenção, RH...) é afetado, porque nenhum deles
   renderiza dentro de #crm-shell. Também não muda nenhuma classe
   global (.panel, .btn, .subabas etc. continuam do jeito que
   estavam pra todo o resto do app) — só adiciona regras novas e
   mais específicas, então nada que já funcionava quebra.

   Estilo: serifada de destaque (Fraunces) nos títulos e valores
   de KPI — que já usam font-family:var(--serif) em várias telas,
   então isso pega sozinho, sem precisar editar o HTML/JS de cada
   tela — combinada com a Roboto que o corpo do texto já usa. Abas
   com mais presença (é a área que mexe com dinheiro) e um pouco
   mais de respiro entre seção e tabela.
   ========================================================= */
#crm-shell {
  /* redefine o VALOR da variável, não a declaração — por isso
     funciona mesmo nos títulos que já têm font-family:var(--serif)
     escrito direto no HTML. Cadeia de fallback escrita por extenso
     (sem var(--serif) aqui dentro) pra não criar referência circular. */
  --serif: 'Fraunces', 'Roboto', system-ui, sans-serif;
}

#crm-shell .cabeca-secao { margin-bottom: 18px; }
#crm-shell th, #crm-shell td { padding: 12px 14px; }

#crm-shell .subabas {
  gap: 8px;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
#crm-shell .subabas button { padding: 8px 18px; font-size: 13.5px; }
#crm-shell .subabas button.ativo {
  font-family: 'Fraunces', var(--serif, 'Roboto'), system-ui, sans-serif;
  font-style: italic;
  font-weight: 600;
  background: rgba(var(--gold-rgb), .12);
  border-color: var(--gold);
  color: var(--gold);
  box-shadow: inset 0 -2px 0 var(--gold);
}

#crm-shell .panel,
#crm-shell .crm-kpi,
#crm-shell .resumo-topo .bloco {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
  transition: box-shadow .18s ease, border-color .18s ease;
}
#crm-shell .panel:hover { border-color: var(--line2); }