/* bee.marketing: tokens e layout base.
   Paleta, gradiente e contraste REAPROVEITADOS do Baseeduc
   (já medidos/validados lá) — mesma marca, mesmo produto de fundo, não
   remedir. Fonte Inter hospedada localmente (zero CDN, mesmo motivo). */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --marca-900: #241433; --marca-800: #3F2560; --marca-700: #5D388B; --marca-600: #6B4099;
  --accent: #C9A227; --accent-light: #E0C264; --accent-veu: rgba(201, 162, 39, .22);

  --superficie: #F7F5FA; --superficie-2: #FFFFFF; --banda: #F4F1F8;
  --tinta: #333332; --tinta-2: #5F5E5C; --tinta-3: #6E6D6A;
  --marca: #5D388B; --marca-veu: #EFE9F7;
  --linha: #E4E1EA; --linha-forte: #7C7986;

  --grad-1: #3F2560; --grad-mid: #6A2F82; --grad-2: #6B4099;
  --menu-tinta: #FFFFFF; --menu-tinta-2: #E9DDFA; --menu-traco: #C7A9EE;
  --menu-veu: rgba(255, 255, 255, .12);
  --menu-chip: linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.05));

  --ok: #1B6B45; --alerta: #8A5A00; --erro: #A32020;
  --ok-veu: #E8F4ED; --alerta-veu: #FBF3E2; --erro-veu: #FBECEC;
  --risco: #9C4A0A; --risco-veu: #FBEEE3;

  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem;
  --r-1: 6px; --r-2: 10px; --r-3: 16px; --r-btn: 12px; --r-pill: 999px;

  --fonte-texto: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fonte-codigo: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --t-display: 1.75rem; --t-h2: 1.375rem; --t-h3: 1.0625rem; --t-corpo: .9375rem;
  --t-dado: .8125rem; --t-micro: .75rem; --t-numero: 1.5rem;

  --dur: 160ms;
  --sombra: 0 1px 2px rgb(51 51 50 / .06), 0 6px 20px rgb(51 51 50 / .06);
  --sombra-menu: 0 8px 30px rgb(51 51 50 / .18);

  --largura-menu: 248px;
  --largura-menu-rail: 72px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --superficie: #1B1626; --superficie-2: #241D33; --banda: #201A2C;
    --tinta: #EDEAF4; --tinta-2: #C7C2D6; --tinta-3: #A9A3BC;
    --marca: #B79BE0; --marca-veu: #2E2645;
    --linha: #35304A; --linha-forte: #58516F;
    --grad-1: #221733; --grad-mid: #1E1329; --grad-2: #171021;
    --ok-veu: #143024; --alerta-veu: #332608; --erro-veu: #331614; --risco-veu: #331F0C; }
}
:root[data-tema="escuro"] { --superficie: #1B1626; --superficie-2: #241D33; --banda: #201A2C;
    --tinta: #EDEAF4; --tinta-2: #C7C2D6; --tinta-3: #A9A3BC;
    --marca: #B79BE0; --marca-veu: #2E2645;
    --linha: #35304A; --linha-forte: #58516F;
    --grad-1: #221733; --grad-mid: #1E1329; --grad-2: #171021;
    --ok-veu: #143024; --alerta-veu: #332608; --erro-veu: #331614; --risco-veu: #331F0C; }
:root[data-tema="escuro"] {
  --superficie: #1B1626; --superficie-2: #241D33; --banda: #201A2C;
  --tinta: #EDEAF4; --tinta-2: #C7C2D6; --tinta-3: #A9A3BC;
  --marca: #B79BE0; --marca-veu: #2E2645;
  --linha: #35304A; --linha-forte: #58516F;
  --grad-1: #221733; --grad-mid: #1E1329; --grad-2: #171021;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fonte-texto); font-size: var(--t-corpo); color: var(--tinta);
  background: var(--superficie); -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--marca-600); outline-offset: 2px; }
a { color: inherit; }

/* Tema (2026-09-23): Claro / Escuro / Sistema (js/tema.js).
   Sem atributo = segue o sistema; data-tema="claro" ignora o modo escuro do
   sistema; data-tema="escuro" força o escuro. Todo bloco
   @media (prefers-color-scheme: dark) é guardado por
   :root:not([data-tema="claro"]) e tem cópia :root[data-tema="escuro"]. */
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }

/* ---------------------------------------------------------------------
   Layout: sidebar retrátil (rail) + conteúdo
--------------------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

/* Pedido do Gustavo (2026-09-23): "barra lateral com as pontas mais
   arredondadas, com cara de premium" -- o menu vira um painel flutuante
   (margem em volta, cantos de 24px, sombra roxa e fio de luz interno) em
   vez de uma faixa colada na borda da janela. */
.menu {
  width: var(--largura-menu);
  flex: none;
  background: linear-gradient(180deg, var(--grad-1) 0%, var(--grad-mid) 55%, var(--grad-2) 100%);
  color: var(--menu-tinta);
  display: flex; flex-direction: column;
  transition: width var(--dur) ease;
  position: sticky; top: 12px; height: calc(100vh - 24px); overflow: hidden;
  margin: 12px 0 12px 12px;
  border-radius: 24px;
  box-shadow: 0 18px 40px -12px rgb(63 37 96 / .45), inset 0 0 0 1px rgb(255 255 255 / .10);
}
.menu::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 120px; pointer-events: none;
  background: radial-gradient(160px 90px at 30% 0%, rgb(255 255 255 / .16), transparent 70%);
}
.menu[data-colapsado="true"] { width: var(--largura-menu-rail); }

.menu-topo {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-4); min-height: 64px;
}
.menu-logo { width: 32px; height: 32px; border-radius: var(--r-2); flex: none; background: #fff; padding: 4px; }
.menu-titulo { font-weight: 700; font-size: var(--t-h3); white-space: nowrap; overflow: hidden; }
.menu[data-colapsado="true"] .menu-titulo,
.menu[data-colapsado="true"] .nav-texto,
.menu[data-colapsado="true"] .menu-usuario-info { display: none; }

.menu-colapsar {
  margin-left: auto; background: var(--menu-veu); border: none; color: var(--menu-tinta);
  width: 28px; height: 28px; border-radius: var(--r-pill); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.menu[data-colapsado="true"] .menu-colapsar { margin: 0 auto; transform: rotate(180deg); }

.nav { flex: 1; overflow-y: auto; padding: var(--e-3); display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3); border-radius: 14px;
  color: var(--menu-tinta-2); text-decoration: none; cursor: pointer;
  white-space: nowrap; overflow: hidden;
  background: none; border: none; font: inherit; text-align: left; width: 100%;
}
.nav-item:hover { background: var(--menu-veu); color: var(--menu-tinta); }
.nav-item.ativo { background: var(--accent-veu); color: var(--menu-tinta); font-weight: 600; box-shadow: inset 0 0 0 1px rgb(224 194 100 / .35); }

/* Pedido do Gustavo (2026-09-23): "uma linha vertical roxa (degradê) pra
   separar na mesma tela os dois relatórios" -- coluna de 2px entre
   Briefing e Onboarding (e entre os dois blocos de Documentos). */
.duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 2px minmax(0, 1fr); gap: var(--e-5); align-items: stretch; }
.divisor-vertical {
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent 0%, var(--marca-600) 12%, var(--grad-mid) 50%, var(--accent) 88%, transparent 100%);
  opacity: .85;
}
@media (max-width: 900px) {
  .duas-colunas { grid-template-columns: minmax(0, 1fr); }
  .divisor-vertical { width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--marca-600), var(--accent), transparent); }
}
.nav-item .icone-svg { flex: none; width: 20px; height: 20px; }
.menu[data-colapsado="true"] .nav-item { justify-content: center; }

/* achado real: .nav-item foi feito pro fundo roxo do menu lateral
   (--menu-tinta-2 é claro demais pra ler em painel branco) -- reaproveitado
   como botão solto dentro do conteúdo principal, o estado inativo ficava
   quase invisível. Estilo padrão pra qualquer .nav-item fora do #nav; um
   style inline no botão (ex: cor/fundo de destaque) continua tendo
   prioridade normal do CSS. */
#pagina-conteudo .nav-item { color: var(--tinta); border: 1px solid var(--linha); width: auto; }
#pagina-conteudo .nav-item:hover { background: var(--marca-veu); color: var(--marca-700); }
#pagina-conteudo .nav-item.ativo { background: var(--marca-veu); color: var(--marca-700); border-color: var(--marca-veu); }

.menu-rodape { padding: var(--e-3); border-top: 1px solid var(--menu-veu); }
.menu-usuario { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2); }
.menu-avatar {
  width: 32px; height: 32px; border-radius: var(--r-pill); flex: none;
  background: var(--accent); color: var(--marca-900); font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: var(--t-micro);
}
.menu-usuario-info { overflow: hidden; }
.menu-usuario-nome { font-size: var(--t-dado); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-usuario-papel { font-size: var(--t-micro); color: var(--menu-traco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e-4) var(--e-6); background: var(--superficie-2);
  border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 5;
}
.topbar-titulo { font-size: var(--t-h2); font-weight: 700; margin: 0; }
.topbar-sub { font-size: var(--t-dado); color: var(--tinta-3); margin-top: 2px; }
.pagina { padding: var(--e-6); flex: 1; }

/* ---------------------------------------------------------------------
   Componentes: KPI, semáforo, tabela, badge de saúde
--------------------------------------------------------------------- */
.kpi-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--e-4); margin-bottom: var(--e-6); }
.kpi-cartao {
  background: var(--superficie-2); border: 1px solid var(--linha); border-left: 4px solid var(--marca-700);
  border-radius: var(--r-3); padding: var(--e-4); box-shadow: var(--sombra);
}
.kpi-cartao.kpi-dourado { border-left-color: var(--accent); }
.kpi-cartao.kpi-ok { border-left-color: var(--ok); }
.kpi-cartao.kpi-alerta { border-left-color: var(--alerta); }
.kpi-cartao.kpi-erro { border-left-color: var(--erro); }
.kpi-rotulo { font-size: var(--t-micro); color: var(--tinta-3); text-transform: uppercase; letter-spacing: .06em; }
.kpi-valor { font-size: var(--t-numero); font-weight: 700; margin-top: var(--e-1); }
.kpi-nota { font-size: var(--t-micro); color: var(--tinta-3); margin-top: var(--e-1); }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--t-micro); font-weight: 600; }
.badge-ok { background: var(--ok-veu); color: var(--ok); }
.badge-alerta { background: var(--alerta-veu); color: var(--alerta); }
.badge-erro { background: var(--erro-veu); color: var(--erro); }
.badge-neutro { background: var(--banda); color: var(--tinta-2); }
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.painel { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--r-3); box-shadow: var(--sombra); margin-bottom: var(--e-5); }
.painel-cabecalho { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); align-items: center; justify-content: space-between; padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linha); }
.painel-titulo { font-size: var(--t-h3); font-weight: 700; margin: 0; }
.painel-corpo { padding: var(--e-4) var(--e-5); }

table.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-dado); }
table.tabela th { text-align: left; font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--linha); }
table.tabela td { padding: var(--e-3); border-bottom: 1px solid var(--linha); }
table.tabela tbody tr:hover { background: var(--banda); }
table.tabela tbody tr.clicavel { cursor: pointer; }
.num-tabular { font-variant-numeric: tabular-nums; }

.esqueleto { background: linear-gradient(90deg, var(--banda) 25%, var(--linha) 37%, var(--banda) 63%); background-size: 400% 100%; animation: esqueleto-anim 1.4s ease infinite; border-radius: var(--r-2); }
@keyframes esqueleto-anim { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.vazio, .erro-estado { padding: var(--e-6); text-align: center; color: var(--tinta-3); }

/* ---------------------------------------------------------------------
   Formulários simples (esteiras)
--------------------------------------------------------------------- */
label { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-micro); color: var(--tinta-2); font-weight: 600; }
/* achado real (2026-09-23): label{flex-direction:column} é pro padrão
   "Rótulo em cima / campo embaixo" -- um <label> de checkbox (checkbox +
   texto lado a lado) que só define `style="display:flex"` sem repetir
   `flex-direction:row` HERDA o column daqui e empilha em vez de alinhar.
   Rede de segurança pra qualquer label assim, atual ou futuro. */
label:has(> input[type="checkbox"]) { flex-direction: row; align-items: center; font-weight: 400; }
.campo-texto, .campo-select, #seletor-usuario {
  font-family: inherit; font-size: var(--t-dado); padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linha-forte); border-radius: var(--r-1); background: var(--superficie-2); color: var(--tinta);
}
.campo-texto:focus, .campo-select:focus { border-color: var(--marca-700); }
#seletor-usuario { background: var(--marca-veu); border-color: var(--marca-veu); color: var(--marca-700); font-weight: 600; }

/* Celular (2026-10-01): o menu fica fixo à esquerda. Recolhido, é só o
   trilho de ícones e a página reserva o espaço dele (nada fica por baixo);
   aberto, cobre a página até escolher uma opção (app.js recolhe de novo).
   A regra antiga usava data-aberto, que nenhum código gravava. */
@media (max-width: 860px) {
  .menu { position: fixed; z-index: 20; left: 0; top: 8px; height: calc(100vh - 16px); margin: 0 0 0 8px; }
  .conteudo { padding-left: calc(var(--largura-menu-rail) + 8px); }
  .pagina { padding: var(--e-4) var(--e-3); min-width: 0; }
  /* abas mais largas que a tela rolam dentro delas, sem alargar a página */
  .abas { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .abas > * { flex: none; }
  .cad-abas { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
  .cad-abas > * { flex: none; }
}

/* Alerta de meta da agência (Planejamento do Briefing, 2026-09-23) */
.alerta-meta {
  margin-top: var(--e-4); padding: var(--e-4) var(--e-4) var(--e-3);
  border-radius: 14px; border: 1px solid color-mix(in srgb, var(--alerta) 35%, transparent); border-left: 4px solid var(--alerta);
  background: linear-gradient(135deg, var(--alerta-veu), var(--superficie-2));
  color: var(--tinta); font-size: var(--t-dado); line-height: 1.5;
}
.alerta-meta-titulo { font-weight: 800; font-size: var(--t-corpo); color: var(--alerta); margin-bottom: 4px; }
.alerta-meta p { margin: 0 0 6px; }
.alerta-meta ol { margin: 4px 0 8px; padding-left: 20px; display: grid; gap: 4px; }
.alerta-meta-rodape { padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--alerta) 35%, transparent); color: var(--tinta-2); }
.alerta-meta--ok { border-color: color-mix(in srgb, var(--ok) 30%, transparent); border-left-color: var(--ok); background: var(--ok-veu); padding: var(--e-3) var(--e-4); }
.alerta-meta--ok strong { color: var(--ok); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .alerta-meta-titulo { color: #E8C170; }
  :root:not([data-tema="claro"]) .alerta-meta--ok strong { color: #7FD1A3; }
}
:root[data-tema="escuro"] .alerta-meta-titulo { color: #E8C170; }
:root[data-tema="escuro"] .alerta-meta--ok strong { color: #7FD1A3; }
:root[data-tema="escuro"] { --ok-veu: #143024; --alerta-veu: #332608; --erro-veu: #331614; --risco-veu: #331F0C; }
:root[data-tema="escuro"] .alerta-meta-titulo { color: #E8C170; }
:root[data-tema="escuro"] .alerta-meta--ok strong { color: #7FD1A3; }

/* Condições comerciais (2026-09-23): % dentro do campo, faixas de irmão,
   valor da taxa e aviso do material */
.campo-pct { position: relative; display: inline-flex; align-items: center; }
.campo-pct input { width: 96px; padding-right: 28px; }
.campo-pct-simbolo { position: absolute; right: 10px; color: var(--tinta-3); font-weight: 600; pointer-events: none; }
.condicao-sub { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 6px 0 4px 26px; }
.faixa-irmao { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px; font-weight: 500; color: var(--tinta-2); }
.faixa-irmao .campo-pct input { width: 84px; }
.condicao-dica { font-size: var(--t-micro); color: var(--tinta-3); }
.condicao-alerta {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-micro); font-weight: 600;
  color: var(--alerta); background: var(--alerta-veu); border-radius: var(--r-pill); padding: 3px 10px;
}
.condicao-alerta::before { content: '!'; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 999px; background: var(--alerta); color: #fff; font-size: 10px; font-weight: 800; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .condicao-alerta { color: #E8C170; }
}
:root[data-tema="escuro"] .condicao-alerta { color: #E8C170; }
:root[data-tema="escuro"] .condicao-alerta { color: #E8C170; }

/* ---------------------------------------------------------------------
   Divisão da verba mês a mês (Investimento, 2026-09-23)
--------------------------------------------------------------------- */
.curva { margin-top: var(--e-4); padding: var(--e-5); border-radius: 20px; border: 1px solid var(--linha); background: var(--superficie-2); box-shadow: var(--sombra); }
.curva-topo { display: flex; justify-content: space-between; gap: var(--e-4); align-items: flex-start; flex-wrap: wrap; }
.curva-titulo { font-weight: 800; font-size: var(--t-h2); letter-spacing: -.01em; margin-bottom: 2px; }
.curva-status { font-size: var(--t-dado); font-weight: 700; padding: 6px 14px; border-radius: var(--r-pill); background: var(--alerta-veu); color: var(--alerta); white-space: nowrap; }
.curva-status--ok { background: var(--ok-veu); color: var(--ok); }
.curva-status--erro { background: var(--erro-veu); color: var(--erro); }
.curva-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); margin-top: var(--e-4); }
.curva-kpis > div { padding: var(--e-3) var(--e-4); border-radius: 14px; background: var(--banda); border: 1px solid var(--linha); }
.curva-kpis span { display: block; font-size: var(--t-micro); color: var(--tinta-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.curva-kpis strong { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; margin-top: 2px; }
.curva-progresso { height: 8px; border-radius: var(--r-pill); background: var(--banda); margin-top: var(--e-3); overflow: hidden; }
.curva-progresso-barra { height: 100%; width: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--marca-600), var(--grad-mid)); transition: width var(--dur) ease; }
.curva-progresso-barra--ok { background: linear-gradient(90deg, var(--marca-600), var(--accent)); }
.curva-progresso-barra--excesso { background: var(--erro); }
.curva-sugestoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: var(--e-4); }
.curva-chip { border: 1px solid var(--linha); background: var(--superficie-2); color: var(--marca); font: inherit; font-size: var(--t-dado); font-weight: 600; padding: 7px 14px; border-radius: var(--r-pill); cursor: pointer; }
.curva-chip:hover { background: var(--marca-veu); border-color: var(--marca-veu); }
.curva-nota { font-size: var(--t-micro); color: var(--tinta-3); margin: var(--e-2) 0 0; }
.curva-cabecalho-colunas, .curva-mes { display: grid; grid-template-columns: 110px minmax(80px, 1fr) 120px 150px minmax(180px, 1.6fr); gap: var(--e-3); align-items: center; }
.curva-cabecalho-colunas { margin-top: var(--e-5); padding: 0 var(--e-3) var(--e-2); border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--marca-600), var(--accent)) 1; }
.curva-cabecalho-colunas span { font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.curva-fase { margin-top: var(--e-3); border-radius: 16px; background: var(--banda); padding: var(--e-2) var(--e-3) var(--e-3); border-left: 4px solid var(--marca-600); }
.curva-fase--meio { border-left-color: var(--grad-mid); }
.curva-fase--fim { border-left-color: var(--accent); }
.curva-fase-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); padding: var(--e-2) 0; }
.curva-fase-cabeca strong { font-size: var(--t-corpo); margin-right: 8px; }
.curva-fase-cabeca span { font-size: var(--t-dado); color: var(--tinta-3); }
.curva-fase-subtotal { font-weight: 700; color: var(--tinta-2) !important; font-variant-numeric: tabular-nums; }
.curva-mes { padding: 6px 0; border-top: 1px solid var(--linha); }
.curva-mes-nome { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.curva-tag { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: var(--r-pill); background: var(--accent-veu); color: var(--alerta); }
.curva-pista { height: 10px; border-radius: var(--r-pill); background: var(--superficie-2); overflow: hidden; }
.curva-barra { height: 100%; width: 0; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--marca-600), #8B5FC4); transition: width var(--dur) ease; }
.curva-barra--pico { background: linear-gradient(90deg, var(--accent), var(--accent-light)); }
.curva-mes .campo-pct input { width: 100%; }
.curva-mes .campo-pct { width: 100%; }
.campo-reais { position: relative; display: inline-flex; align-items: center; width: 100%; }
.campo-reais input { width: 100%; padding-left: 34px; }
.campo-reais-simbolo { position: absolute; left: 10px; color: var(--tinta-3); font-weight: 600; font-size: var(--t-dado); pointer-events: none; }
.curva-rodape { display: flex; gap: var(--e-3); align-items: center; margin-top: var(--e-4); }
.curva-salvar { border: 0; border-radius: var(--r-btn); padding: 11px 22px; font: inherit; font-weight: 700; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--marca-700), var(--grad-mid)); box-shadow: 0 10px 24px -10px rgb(93 56 139 / .6); }
.curva-salvar:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
@media (max-width: 1100px) {
  .curva-cabecalho-colunas { display: none; }
  .curva-mes { grid-template-columns: 90px 1fr 1fr; grid-template-areas: 'nome pista pista' 'pct reais reais' 'acao acao acao'; }
  .curva-mes-nome { grid-area: nome; } .curva-pista { grid-area: pista; }
  .curva-mes .campo-pct { grid-area: pct; } .curva-mes .campo-reais { grid-area: reais; } .curva-mes > input { grid-area: acao; }
  .curva-kpis { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Esteira do Comercial: abas, resumo do campo, campanhas criadas,
   replicar (2026-09-23)
--------------------------------------------------------------------- */
.abas { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--superficie-2); border: 1px solid var(--linha); margin-bottom: var(--e-4); box-shadow: var(--sombra); }
.aba-botao { border: 0; background: none; font: inherit; font-weight: 600; font-size: var(--t-dado); color: var(--tinta-2); padding: 8px 18px; border-radius: var(--r-pill); cursor: pointer; }
.aba-botao:hover { color: var(--marca); }
.aba-botao--ativa { color: #fff; background: linear-gradient(135deg, var(--marca-700), var(--grad-mid)); box-shadow: 0 6px 16px -8px rgb(93 56 139 / .6); }
.aba-botao--ativa:hover { color: #fff; }

.etapa { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-micro); font-weight: 700; padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.etapa--neutra { background: var(--banda); color: var(--tinta-3); }
.etapa--marca { background: var(--marca-veu); color: var(--marca); }
.etapa--alerta { background: var(--alerta-veu); color: var(--alerta); }
.etapa--ok { background: var(--ok-veu); color: var(--ok); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .etapa--alerta { color: #E8C170; }
  :root:not([data-tema="claro"]) .etapa--ok { color: #7FD1A3; }
}
:root[data-tema="escuro"] .etapa--alerta { color: #E8C170; }
:root[data-tema="escuro"] .etapa--ok { color: #7FD1A3; }
:root[data-tema="escuro"] .etapa--alerta { color: #E8C170; }
:root[data-tema="escuro"] .etapa--ok { color: #7FD1A3; }

.resumo-campo { margin-top: var(--e-2); border: 1px solid var(--linha); border-radius: 20px; padding: var(--e-5); background: linear-gradient(180deg, var(--marca-veu), var(--superficie-2) 180px); }
.resumo-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e-4); flex-wrap: wrap; }
.resumo-titulo { font-size: var(--t-h2); font-weight: 800; letter-spacing: -.01em; }
.resumo-cobertura { min-width: 280px; }
.resumo-cobertura span { font-size: var(--t-dado); color: var(--tinta-2); font-weight: 600; }
.resumo-cobertura-barra { height: 8px; border-radius: var(--r-pill); background: var(--superficie-2); overflow: hidden; margin-bottom: 6px; border: 1px solid var(--linha); }
.resumo-cobertura-barra > div { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--marca-600), var(--accent)); }
.resumo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: var(--e-3); margin-top: var(--e-4); }
.resumo-kpi { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 14px; padding: var(--e-3) var(--e-4); }
.resumo-kpi span { display: block; font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.resumo-kpi strong { display: block; font-size: 1.25rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.resumo-kpi small { display: block; font-size: var(--t-micro); color: var(--tinta-3); margin-top: 2px; }
.resumo-bloco { margin-top: var(--e-5); }
.resumo-bloco-titulo { font-weight: 800; margin-bottom: var(--e-3); }
.resumo-meses { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: 8px; align-items: end; overflow-x: auto; padding-bottom: 4px; }
.resumo-mes { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.resumo-mes-valor { font-size: var(--t-micro); font-weight: 700; color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.resumo-mes-pista { width: 100%; max-width: 44px; height: 110px; display: flex; align-items: flex-end; }
.resumo-mes-pista > div { width: 100%; min-height: 3px; border-radius: 10px 10px 3px 3px; background: linear-gradient(180deg, #8B5FC4, var(--marca-600)); }
.resumo-mes--pico .resumo-mes-pista > div { background: linear-gradient(180deg, var(--accent-light), var(--accent)); }
.resumo-mes-nome { font-size: var(--t-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-2); }
.resumo-campo .tabela-wrap { overflow-x: auto; background: var(--superficie-2); border-radius: 14px; border: 1px solid var(--linha); }

.criadas-campo { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; color: var(--marca); padding: var(--e-4) 0 var(--e-2); border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--marca-600), var(--accent)) 1; }
.criadas-campo span { font-size: var(--t-micro); font-weight: 600; color: var(--tinta-3); }
.criadas-linha { display: grid; grid-template-columns: minmax(200px, 2fr) auto 130px 90px auto; gap: var(--e-3); align-items: center; padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); }
.criadas-linha > .replicar, .criadas-linha > div:last-child:empty { grid-column: 1 / -1; }
.criadas-linha > div:last-child { grid-column: 1 / -1; }
.criadas-info { display: flex; flex-direction: column; }
.criadas-num { font-size: var(--t-dado); color: var(--tinta-2); text-align: right; }
.criadas-acoes { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 900px) { .criadas-linha { grid-template-columns: 1fr auto; } .criadas-num { text-align: left; } }

.replicar { margin-top: var(--e-2); border: 1px solid var(--linha); border-left: 4px solid var(--marca-600); border-radius: 16px; padding: var(--e-4); background: var(--banda); }
.replicar-cabeca { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.rotulo-secao { font-size: var(--t-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); margin: var(--e-4) 0 var(--e-2); }
.replicar-destinos-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.replicar-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 4px 16px; }
.replicar-blocos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 8px; }
.replicar-bloco { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linha); font-weight: 400 !important; cursor: pointer; }
.replicar-bloco input { margin-top: 3px; }
.replicar-bloco strong { display: block; color: var(--tinta); font-size: var(--t-dado); }
.replicar-bloco small { display: block; color: var(--tinta-3); font-size: var(--t-micro); margin-top: 2px; }
.resumo-tipos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: var(--e-3); }
.curva-chip--forte { background: var(--marca-veu); border-color: var(--marca-veu); }
.resumo-legenda { margin-top: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: 12px; background: var(--superficie-2); border: 1px dashed var(--linha-forte); font-size: var(--t-micro); color: var(--tinta-2); }
.resumo-legenda p { margin: 2px 0; }

/* ---------------------------------------------------------------------
   CADASTRO no padrão do Baseeduc (2026-09-23)
--------------------------------------------------------------------- */
.linha-clicavel { cursor: pointer; }
.linha-clicavel:hover, .linha-clicavel:focus-visible { background: var(--accent-veu); outline: none; }
.cad-cod, dd.cad-cod { font-family: var(--fonte-codigo); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: .01em; }
.cad-topo { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 16px; padding: 10px 14px; margin-bottom: var(--e-3); box-shadow: var(--sombra); }
.cad-migalha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cad-migalha-botao { border: 1px solid var(--linha-forte); background: var(--superficie-2); color: var(--tinta-2); font: inherit; font-size: var(--t-dado); font-weight: 600; padding: 5px 14px; border-radius: var(--r-pill); cursor: pointer; }
.cad-migalha-botao:hover { border-color: var(--marca); color: var(--marca); }
.cad-migalha-sep { color: var(--tinta-3); }
.cad-migalha-atual { font-size: var(--t-dado); }
.cad-voltar { border: 0; background: none; font: inherit; color: var(--tinta-2); cursor: pointer; padding: 4px 0; margin-bottom: var(--e-2); }
.cad-voltar:hover { color: var(--marca); }
.cad-abas { display: flex; gap: 22px; border-bottom: 1px solid var(--linha); margin-bottom: var(--e-4); }
.cad-aba { position: relative; border: 0; background: none; font: inherit; font-weight: 600; color: var(--tinta-2); padding: 10px 2px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.cad-aba:hover { color: var(--marca); }
.cad-aba--ativa { color: var(--marca); }
.cad-aba--ativa::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--marca-600), var(--grad-mid)); }
.cad-aba-conta { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: var(--r-pill); background: var(--marca-veu); color: var(--marca); }

.cad-cartao { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 16px; padding: var(--e-5); margin-bottom: var(--e-4); box-shadow: var(--sombra); }
.cad-cartao--principal { border-top: 3px solid var(--marca-600); }
.cad-cartao--esteira { border-left: 4px solid var(--accent); }
.cad-cartao-titulo { margin: 0 0 var(--e-3); font-size: var(--t-corpo); font-weight: 700; color: var(--tinta-2); letter-spacing: .02em; }
.cad-nome { font-size: 1.35rem; font-weight: 700; }
.cad-meta { color: var(--tinta-3); font-size: var(--t-dado); margin: 2px 0 var(--e-4); }
.cad-ficha { display: flex; flex-wrap: wrap; gap: 16px 32px; margin: 0; }
.cad-item { min-width: 120px; }
.cad-ficha dt { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--tinta-3); margin-bottom: 4px; }
.cad-ficha dd { margin: 0; font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; }
.cad-ficha dd a { color: var(--marca); }
.cad-lideres .cad-item { min-width: 180px; }
.cad-lider-nome { display: block; font-weight: 600; }
.cad-lider-contato { display: block; font-size: var(--t-micro); color: var(--tinta-3); font-weight: 400; margin-top: 2px; }
.cad-lider-vago { font-style: italic; color: var(--tinta-3); font-weight: 400 !important; }
.cad-nota { font-size: var(--t-micro); color: var(--tinta-3); margin-top: var(--e-3); }
.cad-aviso { margin-top: var(--e-3); padding: 10px 14px; border-radius: 10px; background: var(--alerta-veu); color: var(--alerta); font-size: var(--t-dado); }
.cad-campanhas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--e-3); }
.cad-origens { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.cad-origem { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); background: var(--banda); color: var(--tinta-3); white-space: nowrap; cursor: help; }
.cad-origem--institucional { background: var(--marca-veu); color: var(--marca); }
.cad-origem--onboarding, .cad-origem--briefing { background: var(--accent-veu); color: var(--alerta); }
.cad-origem--cadastro_mkt { background: var(--ok-veu); color: var(--ok); }

.etiq { display: inline-flex; align-items: center; font-size: var(--t-micro); font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); background: var(--marca-veu); color: var(--marca); white-space: nowrap; }
.etiq-ok { background: var(--ok-veu); color: var(--ok); }
.etiq-neutra { background: var(--banda); color: var(--tinta-3); }
.etiq-alerta { background: var(--alerta-veu); color: var(--alerta); }
.etiq-dourada { background: var(--accent-veu); color: var(--alerta); }
.etiq-vago { background: none; border: 1px solid var(--linha-forte); color: var(--tinta-3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .etiq-alerta, :root:not([data-tema="claro"]) .etiq-dourada, :root:not([data-tema="claro"]) .cad-origem--onboarding, :root:not([data-tema="claro"]) .cad-origem--briefing, :root:not([data-tema="claro"]) .cad-aviso { color: #E8C170; }
  :root:not([data-tema="claro"]) .etiq-ok, :root:not([data-tema="claro"]) .cad-origem--cadastro_mkt { color: #7FD1A3; }
}
:root[data-tema="escuro"] .etiq-alerta, :root[data-tema="escuro"] .etiq-dourada, :root[data-tema="escuro"] .cad-origem--onboarding, :root[data-tema="escuro"] .cad-origem--briefing, :root[data-tema="escuro"] .cad-aviso { color: #E8C170; }
:root[data-tema="escuro"] .etiq-ok, :root[data-tema="escuro"] .cad-origem--cadastro_mkt { color: #7FD1A3; }
:root[data-tema="escuro"] .etiq-alerta, :root[data-tema="escuro"] .etiq-dourada, :root[data-tema="escuro"] .cad-aviso { color: #E8C170; }

.cad-tabela-pessoas td { vertical-align: top; }
.cad-cargo-obrig { font-weight: 700; }
.cad-vago { font-style: italic; color: var(--tinta-3); }
tr[data-vago="sim"] { background: color-mix(in srgb, var(--banda) 60%, transparent); }
tr[data-divergente="sim"] td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.cad-form-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--e-3); }
.cad-opcional { font-weight: 400; color: var(--tinta-3); }

.cad-grupo { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 14px; margin-bottom: var(--e-3); overflow: hidden; }
.cad-grupo summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; font-weight: 700; }
.cad-grupo summary::-webkit-details-marker { display: none; }
.cad-grupo summary::before { content: '▸'; color: var(--marca); transition: transform var(--dur) ease; }
.cad-grupo[open] summary::before { transform: rotate(90deg); }
.cad-grupo-conta { font-size: 11px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--marca-veu); color: var(--marca); }
.cad-grupo-como { font-weight: 400; font-size: var(--t-micro); color: var(--tinta-3); flex-basis: 100%; padding-left: 20px; }
.cad-grupo .tabela { margin: 0; }
.cad-grupo--ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.cad-grupo--ok summary::before { color: var(--ok); }

.cad-rank { display: grid; gap: 6px; }
.cad-rank-linha { display: grid; grid-template-columns: minmax(180px, 2fr) 3fr 70px; gap: 12px; align-items: center; font-size: var(--t-dado); }
.cad-rank-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cad-rank-fundo { height: 8px; border-radius: var(--r-pill); background: var(--banda); overflow: hidden; }
.cad-rank-barra { display: block; height: 100%; width: var(--pct); border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent), var(--accent-light)); }
.cad-rank-valor { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinta-2); }

.org-raiz { border: 1px solid var(--linha); border-top: 3px solid var(--marca-600); border-radius: 14px; padding: var(--e-4); background: var(--banda); }
.org-titulo { font-weight: 800; margin-bottom: var(--e-3); }
.org-lideres { display: flex; flex-wrap: wrap; gap: 10px; }
.org-lider { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 12px; padding: 8px 12px; min-width: 170px; display: flex; flex-direction: column; gap: 2px; }
.org-lider--vago strong { font-style: italic; font-weight: 400; color: var(--tinta-3); }
.org-cargo { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3); }
.org-filhos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--e-3); margin-top: var(--e-4); position: relative; }
.org-filho { border: 1px solid var(--linha); border-radius: 14px; padding: var(--e-3); background: var(--superficie-2); cursor: pointer; transition: border-color var(--dur) ease, box-shadow var(--dur) ease; }
.org-filho:hover, .org-filho:focus-visible { border-color: var(--marca); box-shadow: var(--sombra); outline: none; }
.org-filho .org-lider { min-width: 0; flex: 1 1 140px; }
@media (max-width: 700px) { .cad-rank-linha { grid-template-columns: 1fr 70px; } .cad-rank-fundo { display: none; } }
.cad-cartao .cad-ficha + .cad-ficha { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--linha); }
.cad-tabela-pessoas td:first-child { min-width: 150px; }
.cad-tabela-pessoas td:nth-child(2) { min-width: 170px; }
.cad-tabela-pessoas td:nth-child(3) { min-width: 190px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------
   Configurações › Acessos, Minha conta e rodapé do menu (2026-09-23)
--------------------------------------------------------------------- */
.menu-conta { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--e-3) var(--e-3); }
.menu-conta-botao { display: flex; align-items: center; gap: var(--e-3); padding: 8px var(--e-3); border-radius: 12px; border: 0; background: none; color: var(--menu-tinta-2); font: inherit; font-size: var(--t-dado); cursor: pointer; text-align: left; }
.menu-conta-botao:hover { background: var(--menu-veu); color: var(--menu-tinta); }
.menu-conta-icone { display: inline-flex; }
.menu-conta-icone .icone-svg { width: 18px; height: 18px; }
.menu[data-colapsado="true"] .menu-conta-botao { justify-content: center; }

.cfg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: var(--e-3); margin-bottom: var(--e-4); }
.cfg-kpi { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 14px; padding: var(--e-3) var(--e-4); box-shadow: var(--sombra); }
.cfg-kpi span { display: block; font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.cfg-kpi strong { font-size: 1.5rem; }
.cfg-chips { display: flex; gap: 4px; flex-wrap: wrap; max-width: 360px; }
.cfg-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); background: var(--marca-veu); color: var(--marca); white-space: nowrap; }
.cfg-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cfg-perigo { color: var(--erro) !important; }
tr.cfg-inativo td { opacity: .55; }
tr.cfg-falha td { background: color-mix(in srgb, var(--alerta-veu) 50%, transparent); }
.cfg-detalhe { max-width: 380px; font-size: var(--t-dado); color: var(--tinta-2); overflow-wrap: anywhere; }
.cfg-painel { background: var(--superficie-2); border: 1px solid var(--linha); border-top: 3px solid var(--marca-600); border-radius: 18px; padding: var(--e-5); margin-bottom: var(--e-4); box-shadow: var(--sombra); }
.cfg-painel--ok { border-top-color: var(--ok); display: grid; gap: var(--e-3); justify-items: start; }
.cfg-painel--ok p { margin: 0; color: var(--tinta-2); }
.cfg-painel-cabeca { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--e-3); font-size: var(--t-h3); }
.cfg-fechar { border: 0; background: none; font-size: 1.5rem; line-height: 1; color: var(--tinta-3); cursor: pointer; }
.cfg-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: var(--e-3); }
.cfg-grade--1 { grid-template-columns: 1fr; }
.cfg-campo { display: flex !important; flex-direction: column !important; gap: 4px; }
.cfg-senha { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cfg-senha input { flex: 1 1 180px; font-family: var(--fonte-codigo); }
.cfg-senha-acao { border: 1px solid var(--linha); background: var(--superficie-2); color: var(--marca); font: inherit; font-size: var(--t-micro); font-weight: 600; padding: 6px 10px; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap; }
.cfg-perfis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px; }
.cfg-perfil { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--banda); border: 1px solid var(--linha); font-weight: 400 !important; cursor: pointer; }
.cfg-perfil input { margin-top: 3px; }
.cfg-perfil strong { display: block; color: var(--tinta); font-size: var(--t-dado); }
.cfg-perfil small { display: block; color: var(--tinta-3); font-size: var(--t-micro); margin-top: 2px; }
.cfg-telas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 6px; transition: opacity var(--dur) ease; }
.cfg-tela { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px; padding: 8px 12px; border: 1px solid var(--linha); border-radius: 10px; font-weight: 500 !important; color: var(--tinta) !important; cursor: pointer; }
.cfg-tela:has(input:checked) { border-color: var(--marca); background: var(--marca-veu); }
.cfg-credenciais { display: grid; gap: 4px; padding: var(--e-3) var(--e-4); border-radius: 12px; background: var(--banda); border: 1px dashed var(--linha-forte); font-family: var(--fonte-codigo); font-size: var(--t-dado); overflow-wrap: anywhere; }
.cfg-modal-fundo { position: fixed; inset: 0; background: rgb(20 12 32 / .55); display: grid; place-items: center; z-index: 50; padding: var(--e-4); backdrop-filter: blur(3px); }
.cfg-modal { width: min(460px, 100%); background: var(--superficie-2); border-radius: 20px; padding: var(--e-5); box-shadow: 0 30px 80px rgb(0 0 0 / .35); border-top: 3px solid var(--marca-600); }

/* seletor de tema (menu e login) */
.menu-tema { padding: 0 var(--e-3) var(--e-2); }
.tema-seletor { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); background: rgb(255 255 255 / .10); border: 1px solid rgb(255 255 255 / .14); }
.tema-opcao { flex: 1; border: 0; background: none; color: rgb(255 255 255 / .75); font: inherit; font-size: 11px; font-weight: 600; padding: 5px 8px; border-radius: var(--r-pill); cursor: pointer; }
.tema-opcao:hover { color: #fff; }
.tema-opcao--ativa { background: rgb(255 255 255 / .92); color: #3F2560; }
.tema-opcao--ativa:hover { color: #3F2560; }
.tema-seletor--compacto .tema-opcao { padding: 3px 8px; font-size: 10px; }
.menu[data-colapsado="true"] .menu-tema { display: none; }

/* Configurações no rodapé do menu, acima do usuário (2026-09-23) */
.nav-rodape { flex: none; overflow: visible; padding: 0 0 var(--e-2); }
.nav-rodape:empty { display: none; }
/* aviso dentro da tela, no lugar do alert nativo */
.cfg-aviso { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; gap: 14px; align-items: center; max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 14px; background: var(--superficie-2); color: var(--tinta); border: 1px solid var(--linha); border-left: 4px solid var(--ok); box-shadow: 0 18px 40px -14px rgb(20 12 32 / .45); font-size: var(--t-dado); }
.cfg-aviso--erro { border-left-color: var(--alerta); }
.cfg-aviso button { border: 0; background: none; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--tinta-3); }
.curva-chip--ativo { color: #fff !important; border-color: transparent !important; background: linear-gradient(135deg, var(--marca-700), var(--grad-mid)) !important; box-shadow: 0 6px 16px -8px rgb(93 56 139 / .6); }

/* ---------------------------------------------------------------------
   Painel de Saúde com sub-abas (2026-09-24)
--------------------------------------------------------------------- */
.sd-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--r-3); padding: var(--e-3) var(--e-4); box-shadow: var(--sombra); margin-bottom: var(--e-4); }
.sd-filtros label { min-width: 150px; }
.sd-filtros .campo-select { max-width: 280px; }
.sd-filtros-atalhos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-left: auto; align-items: center; }
.sd-abas { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; }
.sd-chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.sd-chip-conta { margin-left: 6px; font-size: var(--t-micro); opacity: .75; }
.sd-barra-ferramentas { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; justify-content: space-between; margin-bottom: var(--e-4); }
.sd-busca { min-width: 260px; }
.sd-sem { color: var(--tinta-3); font-size: var(--t-micro); }
.sd-num { text-align: right !important; white-space: nowrap; }
.sd-ordenavel { cursor: pointer; user-select: none; }
.sd-ordenavel:hover { color: var(--marca); }
.sd-tabela-wrap { overflow-x: auto; }
.sd-tabela td { vertical-align: top; }
.sd-nome { min-width: 180px; max-width: 420px; }
.sd-nome-principal { font-weight: 600; overflow-wrap: anywhere; }
.sd-nome-sub { font-size: var(--t-micro); color: var(--tinta-3); overflow-wrap: anywhere; }
.sd-selos { display: flex; flex-wrap: wrap; gap: 4px; }
.sd-mais { margin-top: var(--e-3); }
.sd-detalhe > td { background: var(--banda); padding: var(--e-3) var(--e-4) !important; }
.sd-aberta > td { background: var(--marca-veu); }
.sd-subtabela { font-size: var(--t-micro); }
.sd-linha-especial td { color: var(--tinta-2); font-style: italic; }
.sd-linha-erro td:first-child { box-shadow: inset 3px 0 0 var(--erro); }
.sd-linha-alerta td:first-child { box-shadow: inset 3px 0 0 var(--alerta); }
.sd-txt-alerta { color: var(--alerta); font-weight: 600; }
.sd-txt-erro { color: var(--erro); font-weight: 700; }
.sd-aviso { background: var(--alerta-veu); color: var(--alerta); border-radius: var(--r-2); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-4); font-size: var(--t-dado); }

.sd-alertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--e-3); margin-bottom: var(--e-5); }
.sd-alerta { text-align: left; font: inherit; color: var(--tinta); border: 1px solid var(--linha); border-left: 4px solid var(--alerta); background: var(--superficie-2); border-radius: var(--r-2); padding: var(--e-3) var(--e-4); cursor: pointer; box-shadow: var(--sombra); }
.sd-alerta:hover { border-color: var(--marca-700); }
.sd-alerta--erro { border-left-color: var(--erro); }
.sd-alerta--ok { border-left-color: var(--ok); cursor: default; }
.sd-alerta-titulo { font-weight: 700; font-size: var(--t-dado); overflow-wrap: anywhere; }
.sd-alerta-detalhe { font-size: var(--t-micro); color: var(--tinta-2); margin-top: 4px; overflow-wrap: anywhere; }

.sd-funil { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: var(--e-2); overflow-x: auto; }
.sd-etapa { border-radius: var(--r-2); padding: var(--e-3); background: var(--banda); border-top: 3px solid var(--marca-700); position: relative; }
.sd-etapa--acrm { border-top-color: var(--accent); }
.sd-etapa-fonte { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.sd-etapa-nome { font-weight: 700; margin-top: 2px; }
.sd-etapa-vol { font-size: var(--t-numero); font-weight: 700; margin-top: var(--e-1); }
.sd-etapa-taxa { font-size: var(--t-micro); color: var(--tinta-2); min-height: 1.2em; }
.sd-etapa-custo { font-weight: 700; color: var(--marca); margin-top: var(--e-2); min-height: 1.3em; }
.sd-etapa-rot { font-size: var(--t-micro); color: var(--tinta-3); }

.sd-legenda { display: flex; flex-wrap: wrap; gap: 4px var(--e-3); font-size: var(--t-micro); color: var(--tinta-2); }
.sd-leg::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sd-leg--gasto::before { background: var(--marca); opacity: .6; }
.sd-leg--conv::before { background: var(--accent); height: 3px; vertical-align: 3px; }
.sd-grafico-wrap { overflow-x: auto; }
.sd-grafico { width: 100%; min-width: 560px; height: auto; display: block; }
.sd-grade { stroke: var(--linha); stroke-width: 1; }
.sd-barra-gasto { fill: var(--marca); opacity: .6; }
.sd-barra-gasto:hover { opacity: .9; }
.sd-linha-conv { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.sd-eixo { font-size: 11px; fill: var(--tinta-3); }

.sd-barra { height: 8px; border-radius: var(--r-pill); background: var(--banda); overflow: hidden; min-width: 60px; }
.sd-barra-cheia { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--marca), var(--marca-600)); }
.sd-barra-cheia.sd-tom-ok { background: var(--ok); }
.sd-barra-cheia.sd-tom-alerta { background: var(--alerta); }
.sd-pct-celula { display: flex; align-items: center; gap: var(--e-2); justify-content: flex-end; }
.sd-pct-celula .sd-barra { width: 70px; }
.sd-niveis { display: grid; gap: var(--e-3); }
.sd-nivel { display: grid; grid-template-columns: 1fr 64px; gap: 4px var(--e-3); align-items: center; }
.sd-nivel-topo { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--e-3); font-size: var(--t-dado); flex-wrap: wrap; }
.sd-nivel-pct { font-size: var(--t-micro); color: var(--tinta-2); text-align: right; }

.sd-migalha { display: flex; align-items: center; gap: 4px; font-size: var(--t-dado); flex-wrap: wrap; }
.sd-migalha-item { border: 0; background: none; font: inherit; color: var(--marca); font-weight: 600; cursor: pointer; padding: 2px 4px; }
.sd-migalha-atual { font-weight: 600; }

.sd-grade-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--e-5); }
.sd-grade-2 > .painel { margin-bottom: 0; }
.sd-grade-2 { margin-bottom: var(--e-5); }
.sd-barras { display: grid; gap: var(--e-2); }
.sd-barras-linha { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(60px, 1fr) auto auto; gap: var(--e-3); align-items: center; font-size: var(--t-dado); }
.sd-barras-val { text-align: right; white-space: nowrap; }
.sd-genero { display: flex; flex-wrap: wrap; gap: var(--e-4); margin-bottom: var(--e-4); }
.sd-genero-item { display: flex; flex-direction: column; gap: 2px; background: var(--banda); border-radius: var(--r-2); padding: var(--e-2) var(--e-3); font-size: var(--t-dado); }
.sd-calor { border-radius: var(--r-1); padding: 4px 8px; background: color-mix(in srgb, var(--marca-700) calc(var(--calor) * 45%), transparent); }

.sd-linha-tempo { list-style: none; margin: 0; padding: 0 0 0 var(--e-4); border-left: 2px solid var(--linha); display: grid; gap: var(--e-3); }
.sd-evento { position: relative; font-size: var(--t-dado); }
.sd-evento::before { content: ''; position: absolute; left: calc(-1 * var(--e-4) - 7px); top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--tinta-3); }
.sd-evento--caiu::before { background: var(--erro); }
.sd-evento--voltou::before { background: var(--ok); }
.sd-evento-quando { font-size: var(--t-micro); color: var(--tinta-3); }
.sd-painel-info .painel-corpo { border-left: 4px solid var(--accent); border-radius: 0 0 var(--r-3) var(--r-3); }
.sd-texto { margin: 0 0 var(--e-3); font-size: var(--t-dado); line-height: 1.55; color: var(--tinta-2); }
.sd-lista { margin: 0 0 var(--e-3); padding-left: var(--e-5); font-size: var(--t-dado); line-height: 1.6; color: var(--tinta-2); }
.sd-sync { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: var(--e-3); }
.sd-sync-item { background: var(--banda); border-radius: var(--r-2); padding: var(--e-3); font-size: var(--t-dado); }
.sd-sync-topo { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); }
.sd-sync-item summary { cursor: pointer; font-size: var(--t-micro); color: var(--marca); margin-top: var(--e-2); }
.sd-sync-detalhe { font-size: var(--t-micro); color: var(--tinta-2); margin-top: var(--e-2); overflow-wrap: anywhere; line-height: 1.5; }
.sd-backfill { margin-top: var(--e-4); display: grid; gap: var(--e-2); font-size: var(--t-dado); }
/* Painel de Saúde: diálogo, criativos, horários e conjuntos (2026-09-29) */
.sd-leg--dlg::before { background: var(--ok); height: 3px; vertical-align: 3px; }
.sd-linha-dlg { fill: none; stroke: var(--ok); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.sd-criativo { display: flex; gap: var(--e-3); align-items: flex-start; min-width: 260px; max-width: 460px; }
.sd-criativo-corpo { min-width: 0; display: grid; gap: 2px; }
.sd-mini { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-2); flex: none; background: var(--banda); }
.sd-texto-anuncio { font-size: var(--t-micro); color: var(--tinta-2); white-space: pre-line; overflow-wrap: anywhere; }
.sd-ver-mais { border: 0; background: none; color: var(--marca); font: inherit; font-size: var(--t-micro); font-weight: 600; cursor: pointer; padding: 0; justify-self: start; }
.sd-criativo-botao { margin-top: 2px; }
.sd-ranking { display: grid; gap: 4px; min-width: 190px; font-size: var(--t-micro); }
.sd-ranking-linhas { display: grid; gap: 3px; }
.sd-aviso--neutro { background: var(--banda); color: var(--tinta-2); }
.sd-mapa-hora th, .sd-mapa-hora td { padding: 4px 6px; }
.sd-hora-cel { min-width: 96px; }
.sd-hora-valor { font-weight: 700; }
.sd-hora-melhor { box-shadow: inset 0 0 0 2px var(--ok); }
.sd-hora-pior { box-shadow: inset 0 0 0 2px var(--erro); }
.sd-hora-total td { border-top: 2px solid var(--linha); }
.sd-posic { font-size: var(--t-micro); overflow-wrap: anywhere; }
/* Painel de Saúde: Mês a mês, botão (i) e quadros de 7 dias (2026-09-29) */
.sd-info { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; padding: 0; border: 1px solid var(--linha-forte); border-radius: 50%; background: var(--superficie-2); color: var(--tinta-2); font: italic 700 11px/1 Georgia, serif; cursor: pointer; vertical-align: 2px; position: relative; flex: none; text-transform: none; letter-spacing: 0; }
.sd-info::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
.sd-info:hover, .sd-info[aria-expanded="true"] { color: var(--marca); border-color: var(--marca); background: var(--marca-veu); }
.sd-info:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.sd-info-pop { position: fixed; z-index: 1000; overflow-y: auto; background: var(--superficie-2); color: var(--tinta); border: 1px solid var(--linha); border-radius: var(--r-2); box-shadow: var(--sombra); padding: var(--e-3) var(--e-4); font-size: var(--t-dado); line-height: 1.5; }
.sd-info-pop[hidden] { display: none; }
.sd-info-pop:focus { outline: none; }
.sd-info-pop p { margin: var(--e-2) 0 0; color: var(--tinta-2); overflow-wrap: anywhere; }
.sd-info-pop strong { color: var(--tinta); }
.sd-info-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-2); }
.sd-info-topo .sd-info-titulo { margin: 0; font-weight: 700; color: var(--tinta); }
.sd-info-fechar { border: 0; background: none; color: var(--tinta-2); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; border-radius: var(--r-1); }
.sd-info-fechar:hover { background: var(--marca-veu); color: var(--marca); }
.sd-tabela-meses th:first-child, .sd-tabela-meses td:first-child { min-width: 170px; }
.sd-tabela-meses td.sd-num { min-width: 92px; }
.sd-col-total { background: var(--banda); font-weight: 700; }
.sd-mes-parcial { font-size: 10px; font-weight: 600; color: var(--alerta); text-transform: none; letter-spacing: 0; }
.sd-linha-total td { border-top: 2px solid var(--linha-forte); font-weight: 700; }
.sd-var { font-weight: 700; }
.sd-var--bom { color: var(--ok); }
.sd-var--ruim { color: var(--erro); }
.sd-grade-igual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sd-grade-igual > * { min-width: 0; }
@media (max-width: 1500px) { .sd-grade-igual { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 1100px) {
  .sd-funil { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .sd-grade-2 { grid-template-columns: 1fr; }
  .sd-filtros-atalhos { margin-left: 0; }
}
@media (max-width: 640px) {
  .sd-funil { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .sd-filtros label { min-width: 0; flex: 1 1 140px; }
  .sd-busca { min-width: 0; width: 100%; }
  .sd-barras-linha { grid-template-columns: 1fr auto; }
  .sd-barras-linha .sd-barra { grid-column: 1 / -1; }
}
.sd-oculto { display: none; }
.sd-sub-wrap { width: 0; min-width: 100%; overflow-x: auto; }
.sd-num .sd-nome-sub { white-space: normal; }
.sd-saude { min-width: 170px; white-space: nowrap; }
.sd-abas { border-radius: var(--r-3); }
.sd-filtro-unidade { min-width: 230px; }
.sd-filtro-unidade .campo-select { max-width: 320px; }
.sd-sub-titulo { font-size: var(--t-dado); font-weight: 700; margin: var(--e-5) 0 var(--e-3); }
.sd-resumo-linhas { margin-bottom: var(--e-4); }
.sd-chip-erro { color: var(--erro); border-color: var(--erro-veu); background: var(--erro-veu); }

/* Nível de ensino, investimento por curso e Revisão e aprovação (2026-09-29) */
.criadas-linha > .criadas-extra { grid-column: 1 / -1; }
.criadas-linha > .criadas-extra:empty { display: none; }
.nivel-escolha { border: 1px solid var(--linha); border-left: 4px solid var(--marca-600); border-radius: 16px; padding: var(--e-4); background: var(--banda); }
.nivel-escolha h3 { margin: 0 0 var(--e-2); }
.nivel-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--e-3); margin: var(--e-3) 0; }
.nivel-opcao { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie-2); color: var(--tinta); font: inherit; padding: var(--e-4); cursor: pointer; }
.nivel-opcao strong { color: var(--marca); font-size: 1rem; }
.nivel-opcao span { font-size: var(--t-dado); color: var(--tinta-2); }
.nivel-opcao:hover, .nivel-opcao:focus-visible { border-color: var(--marca-600); }
.nivel-opcao:disabled { opacity: .6; cursor: wait; }
.nivel-atual { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--e-3); }
.campo-somente-leitura { background: var(--banda); color: var(--tinta-2); cursor: default; }
.cursos-bloco { display: flex; flex-direction: column; gap: var(--e-3); }
.cursos-bloco > .curva-chip { align-self: flex-start; }
.cursos-linhas { display: flex; flex-direction: column; gap: var(--e-2); }
.curso-linha { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(110px, 1fr)) auto; gap: var(--e-2); align-items: end; padding: var(--e-2); border: 1px solid var(--linha); border-radius: 12px; background: var(--superficie-2); }
.curso-linha label { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-dado); min-width: 0; }
.curso-linha .campo-texto, .curso-linha .campo-select { width: 100%; min-width: 0; }
.curso-linha-aviso { grid-column: 1 / -1; }
.cursos-total { display: flex; gap: var(--e-3); flex-wrap: wrap; align-items: baseline; font-size: var(--t-dado); padding: var(--e-2) var(--e-3); background: var(--marca-veu); border-radius: 10px; }
.cursos-catalogo summary { cursor: pointer; font-weight: 700; font-size: var(--t-dado); color: var(--marca); }
.cursos-catalogo-corpo { display: flex; flex-direction: column; gap: var(--e-2); margin-top: var(--e-2); }
.cursos-catalogo-lista { display: flex; flex-direction: column; gap: 4px; }
.cursos-catalogo-item { display: flex; justify-content: space-between; align-items: center; gap: var(--e-2); padding: 4px 0; border-bottom: 1px solid var(--linha); font-size: var(--t-dado); }
.cursos-catalogo-item--inativo span { color: var(--tinta-3); }
.cursos-catalogo-novo { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.cursos-catalogo-novo .campo-texto { flex: 1 1 180px; min-width: 0; }
.cursos-sugestoes { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.area-revisao:not(:empty) { margin-top: var(--e-3); }
.rev { display: flex; flex-direction: column; gap: var(--e-3); border: 1px solid var(--linha); border-radius: 16px; padding: var(--e-4); background: var(--banda); min-width: 0; }
.rev-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-3); flex-wrap: wrap; }
.rev-topo h3 { margin: 0; }
.rev-passo { margin: var(--e-3) 0 0; color: var(--marca); font-size: .95rem; }
.rev-resumo { display: flex; flex-direction: column; gap: var(--e-3); }
.rev-bloco { border: 1px solid var(--linha); border-radius: 12px; padding: var(--e-3); background: var(--superficie-2); min-width: 0; }
.rev-bloco h4 { margin: 0 0 var(--e-2); font-size: var(--t-dado); text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-2); }
.rev-bloco ul { margin: 4px 0 var(--e-2); padding-left: 1.2em; font-size: var(--t-dado); }
.rev-sub { font-weight: 700; font-size: var(--t-dado); margin-top: var(--e-3); }
.rev-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: var(--e-2) var(--e-3); }
.rev-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rev-item span { font-size: var(--t-micro); color: var(--tinta-3); }
.rev-item strong { font-size: var(--t-dado); font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
.rev .tabela-wrap { overflow-x: auto; }
.rev-oks { display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-dado); }
.rev-oks label { display: flex; flex-direction: row; gap: 8px; align-items: center; font-weight: 600; }
.rev-justificativa { display: flex; flex-direction: column; gap: 4px; font-size: var(--t-dado); }
.rev-rodape { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; }
.rev-sucesso { display: flex; flex-direction: column; gap: var(--e-2); align-items: flex-start; border: 1px solid var(--ok); border-radius: 14px; padding: var(--e-4); background: var(--ok-veu); }
@media (max-width: 700px) {
  .curso-linha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .curso-linha-nome { grid-column: 1 / -1; }
  .rev { padding: var(--e-3); }
}
/* Celular (390 px, 2026-09-29): campos e botões das esteiras nunca passam da
   largura da tela (o filtro e o período da Esteira do Comercial rolavam para
   o lado). */
@media (max-width: 700px) {
  #pagina-conteudo .campo-select, #pagina-conteudo .campo-texto { max-width: 100%; box-sizing: border-box; }
  #pagina-conteudo label { min-width: 0; max-width: 100%; }
  #pagina-conteudo .nav-item { white-space: normal; max-width: 100%; }
}

/* Contatos: base única no Baseeduc (2026-09-30) */
.onb-baseeduc { margin-top: var(--e-3); padding: var(--e-3); border: 1px solid var(--linha); border-radius: 8px; display: grid; gap: 6px; }
.onb-baseeduc-titulo { font-weight: 700; color: var(--marca-700); }
.onb-baseeduc-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.onb-baseeduc-linha--atualizado, .onb-baseeduc-linha--igual { color: var(--ok); }
.onb-baseeduc-linha--pendente { color: var(--alerta); }
.onb-baseeduc-linha--invalido, .onb-baseeduc-linha--erro, .onb-baseeduc-linha--sem_nome { color: var(--erro); }
/* tabela larga (aba Pessoas do Cadastro) rola dentro do painel, nunca a página */
.painel-corpo.tabela-wrap { overflow-x: auto; }

/* Dia D com desconto por data (2026-10-01) */
.dia-d-slots { gap: var(--e-3); margin-top: var(--e-2); flex-wrap: wrap; }
.dia-d-slot { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: flex-end; padding: var(--e-2) var(--e-3); border: 1px solid var(--linha); border-radius: 12px; }
.dia-d-slot-rotulo { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 600; }

/* O que falta e Dados do Campo (2026-10-01) */
.falta-cabecalho { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.falta-filtros { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.falta-filtros .campo-select, .falta-filtros .campo-texto { max-width: 100%; }
.falta-check { display: inline-flex !important; flex-direction: row !important; gap: 6px; align-items: center; font-weight: 400 !important; font-size: var(--t-dado); }
.falta-campo { align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.falta-campo-acoes { display: inline-flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }
.falta-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--e-2) var(--e-3); align-items: start; padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); }
.falta-linha > .falta-itens { grid-column: 1 / -1; }
.falta-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.falta-pcts { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
.falta-itens { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.falta-grupo { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--e-2); align-items: baseline; }
@media (max-width: 600px) { .falta-grupo { grid-template-columns: 1fr; gap: 4px; } }
.falta-grupo-rotulo { font-size: var(--t-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.falta-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.falta-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-micro); font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--linha); background: var(--superficie-2); color: var(--tinta-2); white-space: nowrap; max-width: 100%; }
.falta-chip--obrig { border-color: var(--erro); background: var(--erro-veu); color: var(--erro); }
.falta-chip-campo { font-style: normal; font-weight: 800; color: var(--marca); background: var(--marca-veu); border-radius: var(--r-pill); padding: 0 6px; }
@media (max-width: 600px) { .falta-linha { grid-template-columns: minmax(0, 1fr) auto; } .falta-linha > .falta-pcts { grid-row: 2; grid-column: 1 / -1; } .falta-linha > :nth-child(3) { grid-row: 1; grid-column: 2; } .falta-pcts { flex-direction: row; flex-wrap: wrap; } }
.campo-secao { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.campo-secao-titulo { margin: 0 0 var(--e-3); font-size: var(--t-h3); color: var(--marca-700); }
.campo-acoes { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; margin-top: var(--e-4); }
.campo-aplicar-lista { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--e-3); }
.campo-aplicar-linha { display: grid !important; grid-template-columns: auto minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-2); align-items: center; font-weight: 400 !important; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.campo-aplicar-modo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 8px; }
.campo-aplicar-modo label { display: flex !important; flex-direction: row !important; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linha); font-weight: 400 !important; cursor: pointer; }
.campo-aplicar-modo strong { display: block; } .campo-aplicar-modo small { display: block; color: var(--tinta-3); }
@media (max-width: 600px) { .campo-aplicar-linha { grid-template-columns: auto 1fr; } .campo-aplicar-linha > span { grid-column: 2; } }

/* Briefing de campanha: briefing + onboarding num documento só (2026-10-01) */
.bc-doc { max-width: 980px; }
.bc-titulo { margin: var(--e-2) 0 var(--e-1); font-size: var(--t-h2); color: var(--tinta); }
.bc-secao { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.bc-secao-titulo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin: 0 0 var(--e-3); font-size: var(--t-h3); color: var(--marca-700); }
.bc-num { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 6px; border-radius: var(--r-pill); background: var(--marca-veu); color: var(--marca); font-size: var(--t-micro); font-weight: 800; }
.bc-marca { font-size: var(--t-micro); font-weight: 600; color: var(--tinta-3); background: var(--banda); border-radius: var(--r-pill); padding: 2px 10px; }
.bc-marca--campo { color: var(--marca); background: var(--marca-veu); }
.bc-sub { font-weight: 700; font-size: var(--t-dado); color: var(--tinta-2); margin: var(--e-3) 0 var(--e-2); }
.bc-salvar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; margin-top: var(--e-5); padding: var(--e-3) 0; background: var(--superficie-2); border-top: 1px solid var(--linha); }

/* Seleção em massa (2026-10-01) */
.criadas-massa { display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; padding: var(--e-2) var(--e-3); margin-bottom: var(--e-2); border-radius: 12px; background: var(--banda); }
.criadas-massa-todas, .criadas-campo-sel, .criadas-sel { display: inline-flex !important; flex-direction: row !important; gap: 8px; align-items: center; font-weight: inherit; cursor: pointer; }
.criadas-campo-sel { font-weight: 800 !important; color: var(--marca); font-size: inherit; }
.criadas-massa-todas { font-weight: 700 !important; }
.criadas-sel { align-items: flex-start; }
.criadas-sel input, .criadas-campo-sel input, .criadas-massa-todas input { margin-top: 2px; }
.criadas-massa > div[role="status"] { flex-basis: 100%; }
.criadas-massa > div[role="status"]:empty { display: none; }

/* Briefing de campanha em passo a passo (2026-10-01) */
.bc-doc { max-width: none; }
.bc-trilha-caixa { overflow-x: auto; margin: var(--e-3) 0 var(--e-4); padding: var(--e-4) var(--e-3); border: 1px solid var(--linha); border-radius: var(--r-3, 16px); background: var(--superficie-2); scrollbar-width: thin; }
.bc-trilha { display: flex; list-style: none; margin: 0; padding: 0; min-width: max-content; }
.bc-passo { position: relative; flex: 1 1 0; min-width: 132px; display: flex; justify-content: center; }
.bc-passo + .bc-passo::before { content: ''; position: absolute; top: 17px; right: calc(50% + 24px); left: calc(-50% + 24px); height: 2px; background: var(--linha-forte); }
.bc-passo--feita + .bc-passo::before, .bc-passo--feita + .bc-passo--atual::before { background: var(--marca); }
.bc-passo-botao { display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; padding: 0 6px; cursor: pointer; font: inherit; color: var(--tinta-3); }
.bc-passo-num { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--t-dado); color: #fff; background: color-mix(in srgb, var(--marca) 28%, var(--superficie-2)); transition: background var(--dur, .2s), box-shadow var(--dur, .2s); }
.bc-passo-rotulo { font-size: var(--t-dado); text-align: center; line-height: 1.25; max-width: 124px; }
.bc-passo--atual .bc-passo-num { background: var(--marca); box-shadow: 0 0 0 4px var(--marca-veu); }
.bc-passo--atual .bc-passo-rotulo { color: var(--tinta); font-weight: 700; }
.bc-passo--feita .bc-passo-num { background: var(--marca-600, var(--marca)); }
.bc-passo--feita .bc-passo-rotulo { color: var(--tinta-2); }
.bc-passo--falta .bc-passo-num { box-shadow: 0 0 0 2px var(--erro); }
.bc-passo--falta.bc-passo--atual .bc-passo-num { box-shadow: 0 0 0 2px var(--erro), 0 0 0 6px var(--erro-veu); }
.bc-passo-botao:focus-visible { outline: 2px solid var(--marca); outline-offset: 4px; border-radius: 8px; }
.bc-quadro { border: 1px solid var(--linha); border-radius: var(--r-3, 16px); background: var(--superficie-2); padding: var(--e-5); }
.bc-quadro[hidden] { display: none; }
.bc-quadro-cabeca { margin-bottom: var(--e-4); padding-bottom: var(--e-3); border-bottom: 1px solid var(--linha); }
.bc-quadro-titulo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; margin: 0 0 4px; font-size: var(--t-h3); color: var(--tinta); }
.bc-navegacao { position: sticky; bottom: 0; z-index: 5; display: flex; gap: var(--e-3); align-items: center; flex-wrap: wrap; margin-top: var(--e-3); padding: var(--e-3) 0; background: var(--superficie-2); border-top: 1px solid var(--linha); }
.bc-navegacao > div[role="status"] { flex-basis: 100%; }
.bc-navegacao > div[role="status"]:empty { display: none; }
.bc-revisao-linha { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); flex-wrap: wrap; padding: var(--e-3) 0; border-bottom: 1px solid var(--linha); }
.bc-revisao-ok { display: flex; flex-direction: column; gap: 6px; padding: var(--e-4); border-radius: 12px; background: var(--ok-veu); color: var(--ok); }
@media (max-width: 600px) { .bc-quadro { padding: var(--e-4) var(--e-3); } .bc-passo { min-width: 104px; } .bc-passo-rotulo { max-width: 96px; font-size: var(--t-micro); } }

/* Replicar por etapa do Briefing de campanha (2026-10-01) */
.replicar-etapa { flex-direction: column !important; gap: 6px; }
.replicar-etapa-principal { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 8px; font-weight: 400 !important; cursor: pointer; }
.replicar-etapa-principal .bc-num { flex: none; margin-top: 1px; }
.replicar-etapa-extra { display: flex !important; flex-direction: row !important; gap: 6px; align-items: center; margin-left: 26px; font-size: var(--t-micro); font-weight: 600 !important; color: var(--tinta-2); cursor: pointer; }

/* Divisão mensal padrão nos Dados do Campo (2026-10-01) */
.campo-dist-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--e-2); }
.campo-dist-mes { display: flex !important; flex-direction: column !important; gap: 4px; font-weight: 700 !important; font-size: var(--t-micro); }

/* Agrupamento por União e Campo (2026-10-01) */
.grupo-barra { display: flex; gap: var(--e-2); justify-content: flex-end; flex-wrap: wrap; margin-bottom: var(--e-2); }
.grupo-uniao { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); flex-wrap: wrap; margin-top: var(--e-4); padding: var(--e-2) var(--e-3); border-radius: 12px; background: var(--marca-veu); }
.grupo-uniao-titulo { display: inline-flex; gap: 8px; align-items: center; font-weight: 800; color: var(--marca-700); }
.grupo-uniao-resumo { font-size: var(--t-micro); font-weight: 600; color: var(--tinta-2); }
.grupo-campo { border: 1px solid var(--linha); border-radius: 12px; margin-top: var(--e-2); background: var(--superficie-2); }
.grupo-campo > summary { list-style: none; cursor: pointer; }
.grupo-campo > summary::-webkit-details-marker { display: none; }
.grupo-campo-cabeca { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; padding: var(--e-3); }
.grupo-campo-cabeca::before { content: '▸'; color: var(--marca); font-size: .9em; transition: transform var(--dur, .2s); }
.grupo-campo[open] > .grupo-campo-cabeca::before { transform: rotate(90deg); }
.grupo-campo-titulo { font-weight: 800; color: var(--marca); }
.grupo-campo-resumo { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; flex: 1 1 320px; min-width: 0; }
.grupo-campo-acoes { display: inline-flex; gap: var(--e-2); margin-left: auto; }
.grupo-campo-cabeca:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 12px; }
.grupo-campo-corpo { padding: 0 var(--e-3) var(--e-2); border-top: 1px solid var(--linha); }

/* Link de pendências (2026-10-01) */
.link-painel { margin: var(--e-3) 0; padding: var(--e-3); border: 1px dashed var(--marca); border-radius: 12px; background: var(--marca-veu); }
.link-painel-titulo { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.link-painel-mensagem { white-space: pre-wrap; margin: var(--e-2) 0; padding: var(--e-2) var(--e-3); border-radius: 10px; background: var(--superficie-2); border: 1px solid var(--linha); font-size: var(--t-dado); color: var(--tinta-2); }
.link-painel-acoes { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; }

/* Briefing do Campo: uma tela por Campo, escola por escola (2026-10-01) */
.bcc-escolas { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-bottom: var(--e-3); }
.bcc-escola { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--t-dado); padding: 6px 14px 6px 6px; border-radius: var(--r-pill); border: 1px solid var(--linha-forte); background: var(--superficie-2); color: var(--tinta-2); cursor: pointer; }
.bcc-escola-marca { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: var(--t-micro); font-weight: 800; color: #fff; background: var(--erro); }
.bcc-escola--ok .bcc-escola-marca { background: var(--ok); }
.bcc-escola--atual { border-color: var(--marca); color: var(--tinta); font-weight: 700; box-shadow: 0 0 0 3px var(--marca-veu); }
.bcc-escola:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.bc-escolha { display: flex; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-3); }
.bc-escolha label, .bcc-checks label, .bcc-subst { display: inline-flex !important; flex-direction: row !important; gap: 8px; align-items: center; font-weight: 400 !important; cursor: pointer; }
.bcc-checks { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--e-3); }
.bcc-subst { margin: var(--e-2) 0 var(--e-3); font-size: var(--t-dado); color: var(--tinta-2); }

/* Escola fora do padrão do Campo (níveis, perfil, rateio), 2026-10-01 */
.bcc-excecao { margin: var(--e-2) 0 var(--e-3); border: 1px dashed var(--linha-forte); border-radius: 12px; padding: var(--e-2) var(--e-3); }
.bcc-excecao > summary { cursor: pointer; font-size: var(--t-dado); font-weight: 600; color: var(--marca-700); }
.bcc-excecao-tabela { overflow-x: auto; margin-top: var(--e-2); }
.bcc-excecao-tabela th, .bcc-excecao-tabela td { font-size: var(--t-micro); white-space: nowrap; }
.bcc-excecao-marca { text-align: center; }
.bcc-excecao-igual { display: inline-flex !important; flex-direction: row !important; gap: 6px; align-items: center; font-weight: 400 !important; }
.bc-confirmar { display: flex; flex-direction: column; gap: 6px; padding: var(--e-3); border-radius: 12px; background: var(--erro-veu, #fdecec); color: var(--tinta); }
.bc-confirmar .campo-acoes { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-top: 4px; }

/* Painel de Saúde compacto (2026-10-05, pedido do Gustavo: "diminua os
   quadrados e retângulos, para que caiba mais informação em uma página").
   Só dentro de .sd: as outras telas mantêm a escala padrão. */
.sd .sd-filtros { padding: var(--e-2) var(--e-3); gap: var(--e-2); margin-bottom: var(--e-3); }
.sd .sd-filtros label { min-width: 130px; font-size: var(--t-micro); }
.sd .sd-filtros .campo-select, .sd .sd-filtros .campo-texto { padding: 4px var(--e-2); }
.sd .sd-filtro-campanha .campo-select { max-width: 340px; }
.sd .abas { margin-bottom: var(--e-3); }
.sd .kpi-grade { grid-template-columns: repeat(auto-fit, minmax(min(128px, 100%), 1fr)); gap: var(--e-2); margin-bottom: var(--e-3); }
.sd .kpi-cartao { padding: var(--e-2) var(--e-3); border-radius: var(--r-2); }
.sd .kpi-rotulo { font-size: 11px; letter-spacing: .04em; }
.sd .kpi-valor { font-size: 1.2rem; margin-top: 2px; }
.sd .kpi-nota { font-size: 11px; margin-top: 2px; line-height: 1.3; }
.sd .painel { margin-bottom: var(--e-3); border-radius: var(--r-2); }
.sd .painel-cabecalho { padding: var(--e-2) var(--e-3); }
.sd .painel-titulo { font-size: var(--t-corpo); }
.sd .painel-corpo { padding: var(--e-2) var(--e-3); }
.sd table.tabela th { padding: 6px var(--e-2); }
.sd table.tabela td { padding: 6px var(--e-2); font-size: var(--t-dado); }
.sd .sd-funil { gap: 6px; }
.sd .sd-etapa { padding: var(--e-2); }
.sd .sd-etapa-vol { font-size: 1.2rem; margin-top: 0; }
.sd .sd-etapa-custo { margin-top: 2px; }
.sd .sd-alertas { gap: var(--e-2); margin-bottom: var(--e-3); }
.sd .sd-alerta { padding: var(--e-2) var(--e-3); }
.sd .sd-aviso { padding: var(--e-2) var(--e-3); margin-bottom: var(--e-3); }
.sd .sd-grade-2 { gap: var(--e-3); margin-bottom: var(--e-3); }
.sd .sd-barra-ferramentas { margin-bottom: var(--e-2); }
.sd .cad-nota { font-size: 11px; }
.sd-acomp-motivo { min-width: 240px; max-width: 460px; }
.sd .kpi-cartao.kpi-ok { border-left-color: var(--ok); }
.sd .sd-tabela .badge { white-space: nowrap; }