/* =====================================================================
   Painel AN — visual novo (limpo, estilo Apple / SaaS).
   Base preto e branco. Cor só em gráficos, tags e semáforo.
   PALETA ÚNICA: cada série tem sempre a mesma cor em todas as telas;
   painel.js lê as variáveis --cor-* daqui para pintar os gráficos.
   ===================================================================== */

@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }

:root,
:root[data-tema="claro"] {
  --fonte: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, "Segoe UI", sans-serif;

  --fundo: #f5f5f7;
  --superficie: #ffffff;
  --texto: #1d1d1f;
  --texto-2: #515154;
  --texto-3: #86868b;
  --linha: #e8e8ed;
  --linha-forte: #d2d2d7;
  --grade: rgba(0, 0, 0, 0.06);
  --realce: rgba(0, 0, 0, 0.04);
  --ativo: rgba(0, 0, 0, 0.06);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
  --tooltip: #1d1d1f;
  --tooltip-texto: #ffffff;

  /* séries — loja e totais */
  --cor-faturamento: #1d1d1f;
  --cor-pedidos: #6e6e73;
  --cor-ticket: #6e6e73;
  --cor-mer: #1d1d1f;
  --cor-novas: #1d1d1f;
  --cor-recorrentes: #c7c7cc;
  --cor-investimento: #aeaeb2;
  --cor-destaque-coluna: rgba(0, 0, 0, 0.045);

  /* séries — tráfego (azuis) */
  --cor-trafego: #0071e3;
  --cor-meta-clique: #0071e3;
  --cor-meta-view: #8ec1f5;
  --cor-roas-cv: #0071e3;       /* ROAS oficial */
  --cor-roas-clique: #003f7f;   /* só clique */
  --cor-roas-ga: #5e5ce6;       /* GA último clique (índigo) */

  /* séries — origens */
  --cor-vip: #a550d8;           /* grupo VIP: roxo */
  --cor-organico: #00a3bf;      /* orgânico: ciano */
  --cor-canal-meta: var(--cor-trafego);
  --cor-canal-vip: var(--cor-vip);
  --cor-canal-busca: var(--cor-organico);
  --cor-canal-direto: #48484a;
  --cor-canal-social_organico: #d0679a;
  --cor-canal-email: #a2845e;
  --cor-canal-outros: #aeaeb2;
  --cor-canal-sem_ga: #e5e5ea;
  --cor-vespera: var(--cor-vip);
  --cor-vip-dia: #d6b0ef;       /* VIP no dia D (mínimo, GA4): roxo claro */
  --cor-meta-sobreposicao: #003f7f; /* receita Meta que se sobrepõe ao VIP no D-1 */
  --cor-pct-mes: #86868b;

  /* eventos (tags) */
  --cor-evento-mudanca_estrategia: #1d1d1f;
  --cor-evento-mudanca_medicao: #5e5ce6;
  --cor-evento-promo: #d0679a;
  --cor-evento-colecao: #a2845e;
  --cor-evento-copa: #48484a;
  --cor-evento-outro: #86868b;
  --cor-faixa-anday: rgba(165, 80, 216, 0.09);
  --cor-faixa-anday-rotulo: #a550d8;

  /* semáforo de meta — as ÚNICAS cores verde/âmbar/vermelho */
  --verde: #248a3d;    --verde-fundo: rgba(52, 199, 89, 0.14);
  --ambar: #b25000;    --ambar-fundo: rgba(255, 149, 0, 0.15);
  --vermelho: #d70015; --vermelho-fundo: rgba(255, 59, 48, 0.12);

  --raio: 16px;
  --menu-largura: 232px;
}

:root[data-tema="escuro"] {
  --fundo: #000000;
  --superficie: #1c1c1e;
  --texto: #f5f5f7;
  --texto-2: #c7c7cc;
  --texto-3: #8e8e93;
  --linha: #2c2c2e;
  --linha-forte: #3a3a3c;
  --grade: rgba(255, 255, 255, 0.08);
  --realce: rgba(255, 255, 255, 0.05);
  --ativo: rgba(255, 255, 255, 0.1);
  --sombra: none;
  --tooltip: #f5f5f7;
  --tooltip-texto: #1d1d1f;

  --cor-faturamento: #f5f5f7;
  --cor-mer: #f5f5f7;
  --cor-novas: #f5f5f7;
  --cor-recorrentes: #636366;
  --cor-investimento: #636366;
  --cor-pct-mes: #aeaeb2;
  --cor-ticket: #aeaeb2;
  --cor-pedidos: #aeaeb2;
  --cor-destaque-coluna: rgba(255, 255, 255, 0.07);
  --cor-trafego: #2997ff;
  --cor-meta-clique: #2997ff;
  --cor-meta-view: #1b4f82;
  --cor-roas-cv: #2997ff;
  --cor-roas-clique: #8ec1f5;
  --cor-roas-ga: #7d7aff;
  --cor-vip: #bf5af2;
  --cor-vip-dia: #6b3a86;
  --cor-meta-sobreposicao: #8ec1f5;
  --cor-organico: #40c8e0;
  --cor-canal-direto: #aeaeb2;
  --cor-canal-sem_ga: #3a3a3c;
  --cor-evento-mudanca_estrategia: #f5f5f7;
  --cor-evento-mudanca_medicao: #7d7aff;
  --cor-evento-copa: #aeaeb2;
  --cor-faixa-anday: rgba(191, 90, 242, 0.14);
  --cor-faixa-anday-rotulo: #bf5af2;

  --verde: #30d158;    --verde-fundo: rgba(48, 209, 88, 0.16);
  --ambar: #ff9f0a;    --ambar-fundo: rgba(255, 159, 10, 0.16);
  --vermelho: #ff453a; --vermelho-fundo: rgba(255, 69, 58, 0.16);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; }
h1, h2, h3 { margin: 0; }
code { font-size: .88em; background: var(--realce); padding: 1px 6px; border-radius: 6px; }

/* ---------------- menu lateral */
.menu {
  position: fixed; inset: 0 auto 0 0; width: var(--menu-largura);
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 14px; background: var(--superficie); border-right: 1px solid var(--linha); z-index: 30;
}
.menu-marca { display: flex; align-items: center; gap: 10px; padding: 4px 10px 22px; text-decoration: none; }
.menu-marca span { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.logo-escuro { display: none; }
[data-tema="escuro"] .logo-claro { display: none; }
[data-tema="escuro"] .logo-escuro { display: block; }
.menu-itens { display: flex; flex-direction: column; gap: 2px; }
.menu-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px;
  color: var(--texto-2); text-decoration: none; font-size: 14.5px; font-weight: 500;
}
.menu-item:hover { background: var(--realce); color: var(--texto); }
.menu-item[aria-current="page"] { background: var(--ativo); color: var(--texto); font-weight: 600; }
.menu-item .icone { flex: none; }
.menu-rodape { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linha); }
.menu-item.desativado { color: var(--texto-3); cursor: default; }
.menu-item.desativado:hover { background: none; }
.menu-item em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--texto-3); }

/* ---------------- área principal */
.principal { margin-left: var(--menu-largura); min-height: 100vh; display: flex; flex-direction: column; }
.faixa-aviso {
  background: var(--texto); color: var(--fundo); text-align: center;
  font-size: 12px; font-weight: 500; padding: 6px 16px;
}
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 40px; background: color-mix(in srgb, var(--fundo) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linha);
}
.seletor-mes { display: flex; align-items: center; gap: 4px; }
.seletor-mes select {
  font: 600 15px var(--fonte); color: var(--texto); background-color: var(--superficie);
  border: 1px solid var(--linha-forte); border-radius: 10px; padding: 7px 34px 7px 12px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%), linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.acoes { display: flex; align-items: center; gap: 4px; margin-left: auto; }

/* ---------------- seletor de período (mês com setinhas + período livre) */
.seletores { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.periodo { position: relative; }
.botao-periodo {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 10px; cursor: pointer;
  font: 600 14px var(--fonte); color: var(--texto); background: var(--superficie); border: 1px solid var(--linha-forte);
  list-style: none; user-select: none;
}
.botao-periodo::-webkit-details-marker { display: none; }
.botao-periodo:hover { background: var(--realce); }
.periodo[data-ativo] .botao-periodo { background: var(--texto); color: var(--superficie); border-color: var(--texto); }
.periodo-painel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; width: 340px; padding: 16px;
  background: var(--superficie); border-radius: 14px; border: 1px solid var(--linha);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .16);
}
.periodo-titulo { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--texto-3); }
.periodo-titulo + .periodo-atalhos { margin-bottom: 16px; }
.periodo-atalhos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.periodo-atalhos a {
  padding: 8px 10px; border-radius: 9px; background: var(--realce); text-decoration: none;
  font-size: 13.5px; font-weight: 500; color: var(--texto);
}
.periodo-atalhos a:hover { background: var(--ativo); }
.periodo-atalhos a[aria-current="true"] { background: var(--texto); color: var(--superficie); }
.periodo-datas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.periodo-datas label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 500; color: var(--texto-2); }
.periodo-datas input {
  width: 100%; font: 14px var(--fonte); color: var(--texto); background: var(--superficie);
  border: 1px solid var(--linha-forte); border-radius: 9px; padding: 7px 9px;
}
.periodo-datas .botao { grid-column: 1 / -1; }
.periodo-painel .nota { margin-top: 12px; line-height: 1.4; }
.botao-icone {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  border: 0; background: none; color: var(--texto-2); cursor: pointer; text-decoration: none;
}
.botao-icone:hover { background: var(--realce); color: var(--texto); }
.botao-icone[aria-disabled="true"] { color: var(--linha-forte); pointer-events: none; }
:focus-visible { outline: 2px solid var(--cor-trafego); outline-offset: 2px; }

.conteudo { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 36px 40px 56px; }

/* ---------------- cabeçalho da tela */
.cabecalho-tela { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.sobretitulo { margin: 0 0 4px; font-size: 13px; font-weight: 500; color: var(--texto-3); }
.cabecalho-tela h1 { font-size: 34px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.cabecalho-tela .meta-tela { display: flex; align-items: center; gap: 10px; color: var(--texto-3); font-size: 13px; }

.rotulo-secao {
  display: flex; align-items: center; gap: 10px; margin: 30px 0 12px;
  font-size: 13px; font-weight: 600; color: var(--texto-2); letter-spacing: .01em;
}
.rotulo-secao::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--rotulo-cor, var(--texto)); }
.rotulo-secao.loja { --rotulo-cor: var(--cor-faturamento); }
.rotulo-secao.trafego { --rotulo-cor: var(--cor-trafego); }
.rotulo-secao.neutro { --rotulo-cor: var(--texto-3); }
.cabecalho-tela + .rotulo-secao { margin-top: 0; }

/* ---------------- grade de 4 colunas */
.grade-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grade-4 + .grade-4 { margin-top: 16px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: 1 / -1; }

/* ---------------- cartões */
.cartao, .bloco {
  background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra);
  border: 1px solid var(--linha); min-width: 0;
}
[data-tema="claro"] .cartao, [data-tema="claro"] .bloco { border-color: transparent; }
.cartao { padding: 20px 22px 18px; display: flex; flex-direction: column; }
/* cabeçalho com altura de 2 linhas: títulos longos + semáforo não desalinham os números da linha */
.cartao header { display: flex; align-items: flex-start; gap: 8px; min-height: 38px; }
.cartao h3 { font-size: 13px; font-weight: 500; color: var(--texto-2); cursor: help; }
.cartao header .semaforo { margin-left: auto; }
.cartao header .info { margin-top: 1px; }
.cartao .valor {
  margin: 6px 0 16px; font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.comparacoes { display: flex; gap: 20px; flex-wrap: wrap; margin: auto 0 0; }
.comparacoes div { display: flex; flex-direction: column; gap: 1px; }
.comparacoes dt { font-size: 11.5px; color: var(--texto-3); }
.comparacoes dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--texto); }
.cartao .nota { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--linha); }
/* cards de uma série: marca de cor antes do título (mesma cor do gráfico) */
.cartao[class*="serie-"] h3::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; vertical-align: 0; background: var(--cor-serie); }
.cartao.serie-vip { --cor-serie: var(--cor-vip); }
.cartao.serie-trafego { --cor-serie: var(--cor-trafego); }
.cartao.serie-organico { --cor-serie: var(--cor-organico); }
.cartao.sobreposicao { background: transparent; box-shadow: none; border: 1.5px dashed var(--linha-forte); }
.cartao.sobreposicao header .tag { margin-left: auto; }

.semaforo {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 8px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.semaforo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.semaforo-verde { color: var(--verde); background: var(--verde-fundo); }
.semaforo-ambar { color: var(--ambar); background: var(--ambar-fundo); }
.semaforo-vermelho { color: var(--vermelho); background: var(--vermelho-fundo); }

.info {
  position: relative; flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px;
  border-radius: 50%; border: 1.3px solid var(--texto-3); color: var(--texto-3);
  font: italic 700 10.5px/1 Georgia, serif; cursor: help;
}
.info:hover, .info:focus { color: var(--texto); border-color: var(--texto); outline: none; }
.info-balao {
  display: none; position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%);
  width: 260px; padding: 11px 13px; border-radius: 12px; z-index: 40;
  background: var(--tooltip); color: var(--tooltip-texto);
  font: normal 400 12.5px/1.45 var(--fonte); text-align: left;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
.info:hover .info-balao, .info:focus .info-balao { display: block; }

/* ---------------- blocos com gráfico / listas */
.bloco { padding: 24px 26px; }
.bloco-cabecalho { margin-bottom: 18px; }
.bloco h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.subtitulo { margin: 4px 0 0; color: var(--texto-3); font-size: 13px; }

.grafico { position: relative; height: 340px; }
.grafico.alto { height: 400px; }
.grafico.baixo { height: 260px; }

.numero-grande { margin: 18px 0 2px; font-size: 38px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; }
.numero-legenda { margin: 0 0 18px; color: var(--texto-2); font-size: 13px; }
.lista-valores { margin: 0; }
.lista-valores div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha); font-size: 14px; }
.lista-valores dt { color: var(--texto-2); }
.lista-valores dd { margin: 0; font-weight: 600; }
.link-mais { display: inline-block; margin-top: 14px; font-size: 13.5px; font-weight: 500; color: var(--cor-trafego); text-decoration: none; }
.link-mais:hover { text-decoration: underline; }

.nota { color: var(--texto-3); font-size: 12.5px; margin: 8px 0 0; }
.vazio { color: var(--texto-3); }
.discreto { color: var(--texto-3); }
.nw { white-space: nowrap; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600; background: var(--realce); color: var(--texto-2); white-space: nowrap;
}
.tag.status-definitivo { background: var(--texto); color: var(--superficie); }
.tag.status-provisorio { background: none; box-shadow: inset 0 0 0 1.3px var(--texto-2); }
.tag.ficticio { font-weight: 500; color: var(--texto-3); }

/* ---------------- avisos */
.aviso {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; padding: 14px 18px;
  background: var(--superficie); border-radius: 12px; box-shadow: var(--sombra);
  font-size: 13.5px; color: var(--texto-2);
}
.aviso::before { content: ""; flex: none; width: 4px; align-self: stretch; border-radius: 4px; background: var(--cor-evento-mudanca_medicao); }
.aviso.discreto { margin: 18px 0 0; box-shadow: none; background: var(--realce); font-size: 12.5px; }
.aviso.discreto::before { background: var(--linha-forte); }
.aviso b { color: var(--texto); font-weight: 600; }

/* ---------------- tabelas */
.tabela-rolagem { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tabela th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--texto-3);
  padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: bottom; white-space: nowrap;
}
.tabela th .discreto { display: block; font-size: 11px; font-weight: 400; }
.tabela td { padding: 11px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--realce); }
.tabela .n { text-align: right; white-space: nowrap; }
.tabela th.n { text-align: right; }
.tabela .forte { font-weight: 600; }
.tabela .nw { white-space: nowrap; }
.tabela .nome { display: block; font-weight: 500; }
.tabela .pai { display: block; margin-top: 2px; color: var(--texto-3); font-size: 12px; }
.tabela .linha-foco td { background: var(--realce); font-weight: 500; }
.tabela .linha-foco td:first-child { box-shadow: inset 3px 0 0 var(--texto); }
.tabela .obs { font-size: 12.5px; color: var(--texto-2); min-width: 200px; }
.tabela a { text-decoration: none; font-weight: 500; }
.tabela a:hover { text-decoration: underline; }
.comparacao .dif { display: block; font-size: 11.5px; color: var(--texto-3); font-weight: 400; }
.comparacao .divergente { font-weight: 600; }
.comparacao .divergente .dif { color: var(--texto); font-weight: 600; }
.comparacao .divergente .dif::before { content: "≠ "; }
.linha-erro td { background: var(--vermelho-fundo); }
.tabela tfoot td { padding: 12px; border-top: 1.5px solid var(--texto); font-weight: 700; white-space: nowrap; }
.tabela tfoot td.n { text-align: right; }
.tabela-dias .fim-de-semana td { background: var(--realce); }
.tabela .marcacoes { white-space: nowrap; }
.tabela .marcacoes .tag + .tag { margin-left: 4px; }
.tag.anday { color: #fff; background: var(--cor-vip); }

.tag.resultado-ok { background: var(--realce); }
.tag.resultado-erro { color: var(--vermelho); background: var(--vermelho-fundo); }

.ponto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 9px; vertical-align: -1px; }
.cor-canal-meta { background: var(--cor-canal-meta); }
.cor-canal-vip { background: var(--cor-canal-vip); }
.cor-canal-busca { background: var(--cor-canal-busca); }
.cor-canal-direto { background: var(--cor-canal-direto); }
.cor-canal-social_organico { background: var(--cor-canal-social_organico); }
.cor-canal-email { background: var(--cor-canal-email); }
.cor-canal-outros { background: var(--cor-canal-outros); }
.cor-canal-sem_ga { background: var(--cor-canal-sem_ga); box-shadow: inset 0 0 0 1px var(--linha-forte); }

/* ---------------- funil */
.funil { list-style: none; margin: 0; padding: 0; }
.funil li { display: grid; grid-template-columns: 150px 1fr 76px 56px; align-items: center; gap: 12px; padding: 9px 0; font-size: 13.5px; }
.funil-nome { color: var(--texto-2); }
.funil-barra { height: 10px; background: var(--realce); border-radius: 99px; overflow: hidden; }
.funil-preenchido { display: block; height: 100%; background: var(--cor-faturamento); border-radius: 99px; }
.funil-valor { text-align: right; font-weight: 600; }
.funil-taxa { text-align: right; color: var(--texto-3); font-size: 12.5px; }

/* ---------------- AN DAY em foco */
.foco-titulo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.foco-titulo h2 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

/* ---------------- linha do tempo */
.linha-do-tempo { list-style: none; margin: 0; padding: 0; }
.linha-do-tempo li { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 16px 0; border-top: 1px solid var(--linha); }
.linha-do-tempo li:first-child { border-top: 0; }
.linha-do-tempo time { color: var(--texto-2); font-size: 13.5px; font-weight: 500; }
.linha-do-tempo strong { display: block; margin-top: 8px; font-size: 15px; font-weight: 600; }
.linha-do-tempo p { margin: 4px 0 0; color: var(--texto-2); font-size: 13.5px; }
.tag.tipo-mudanca_estrategia { color: var(--superficie); background: var(--cor-evento-mudanca_estrategia); }
.tag.tipo-mudanca_medicao { color: #fff; background: var(--cor-evento-mudanca_medicao); }
.tag.tipo-promo { color: #fff; background: var(--cor-evento-promo); }
.tag.tipo-colecao { color: #fff; background: var(--cor-evento-colecao); }
.tag.tipo-copa { color: var(--superficie); background: var(--cor-evento-copa); }
.tag.tipo-outro { color: #fff; background: var(--cor-evento-outro); }

/* ---------------- configurações: abas, formulários, botões */
.segmentado {
  display: inline-flex; gap: 2px; padding: 3px; margin: -6px 0 22px; border-radius: 11px; background: var(--ativo);
}
.segmentado a { padding: 7px 18px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--texto-2); text-decoration: none; }
.segmentado a:hover { color: var(--texto); }
.segmentado a[aria-current="page"] { background: var(--superficie); color: var(--texto); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.1); }

.flash { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 500; background: var(--superficie); box-shadow: var(--sombra); }
.flash::before { margin-right: 8px; font-weight: 700; }
.flash-ok::before { content: "✓"; }
.flash-erro { box-shadow: inset 0 0 0 1.5px var(--texto); }
.flash-erro::before { content: "!"; }

.bloco-cabecalho.linha { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.form-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-rotulo { font-size: 12.5px; font-weight: 500; color: var(--texto-2); }
.campo input:not([type="checkbox"]):not([type="color"]), .campo select, .campo textarea {
  width: 100%; font: 14.5px var(--fonte); color: var(--texto); background: var(--superficie);
  border: 1px solid var(--linha-forte); border-radius: 10px; padding: 9px 12px;
}
.campo textarea { resize: vertical; min-height: 76px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--cor-trafego); outline-offset: 0; border-color: transparent; }
.campo-ajuda { font-size: 12px; color: var(--texto-3); }
.campo-erro { font-size: 12.5px; font-weight: 600; color: var(--texto); }
.campo-erro::before { content: "! "; }
.com-erro input:not([type="checkbox"]), .com-erro select, .com-erro textarea { border-color: var(--texto); border-width: 1.5px; }
.cor-linha { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.cor-linha input[type="color"] { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--linha-forte); border-radius: 8px; background: var(--superficie); cursor: pointer; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--texto-2); cursor: pointer; }
.acoes-form { display: flex; gap: 10px; align-items: center; margin-top: 22px; }
.confirmar .acoes-form { margin-top: 16px; }
.confirmar { box-shadow: inset 0 0 0 1.5px var(--texto), var(--sombra); }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 18px; border-radius: 10px;
  border: 0; background: var(--texto); color: var(--superficie); font: 600 14px var(--fonte); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.botao:hover { opacity: .88; }
.botao-secundario { background: var(--ativo); color: var(--texto); }
.botao-perigo { background: none; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--texto); }
.acoes-linha a { margin-left: 14px; font-size: 13px; font-weight: 500; color: var(--cor-trafego); text-decoration: none; }
.acoes-linha a:hover { text-decoration: underline; }

/* ---------------- eventos */
.legenda-eventos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--linha); font-size: 13px; }
.legenda-eventos li { display: flex; align-items: center; gap: 8px; }
.legenda-eventos b {
  display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  color: var(--superficie); font-size: 10.5px; background: var(--cor-evento-outro);
}
.legenda-eventos span { color: var(--texto-3); }
.evento-mudanca_estrategia b { background: var(--cor-evento-mudanca_estrategia); }
.evento-mudanca_medicao b { background: var(--cor-evento-mudanca_medicao); }
.evento-promo b { background: var(--cor-evento-promo); }
.evento-colecao b { background: var(--cor-evento-colecao); }
.evento-copa b { background: var(--cor-evento-copa); }

/* ---------------- rodapé */
.rodape {
  width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 40px 28px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--texto-3); font-size: 12px;
}

/* ---------------- login */
.pagina-login { min-height: 100vh; display: grid; place-items: center; }
.login { width: min(380px, calc(100% - 32px)); text-align: center; }
.login h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; margin: 18px 0 26px; }
.login form { display: grid; gap: 16px; text-align: left; background: var(--superficie); border-radius: var(--raio); box-shadow: var(--sombra); padding: 28px; }
.login label { display: grid; gap: 7px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
.login input { font: 15px var(--fonte); padding: 11px 13px; border: 1px solid var(--linha-forte); border-radius: 10px; background: var(--superficie); color: var(--texto); }
.login input:focus { outline: 2px solid var(--cor-trafego); outline-offset: 0; border-color: transparent; }
.login button { font: 600 15px var(--fonte); padding: 12px; border: 0; border-radius: 10px; background: var(--texto); color: var(--superficie); cursor: pointer; }
.login .erro { color: var(--vermelho); font-size: 13px; margin: 0; }

/* ---------------- modo apresentação: sem menu, números maiores */
body.apresentando .menu, body.apresentando .rodape, body.apresentando .faixa-aviso,
body.apresentando .acoes .botao-icone:not([data-acao="apresentar"]) { display: none; }
body.apresentando .principal { margin-left: 0; }
body.apresentando .conteudo { max-width: 1600px; padding: 32px 56px; }
body.apresentando .cabecalho-tela h1 { font-size: 44px; }
body.apresentando .cartao .valor { font-size: 46px; }
body.apresentando .numero-grande { font-size: 50px; }
body.apresentando .comparacoes dd { font-size: 15px; }

/* ---------------- responsivo */
@media (max-width: 1180px) {
  .form-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .span-3 { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  /* mesmo peso do seletor do tema, senão a largura do menu (232px) continua valendo */
  :root, :root[data-tema] { --menu-largura: 0px; }
  .menu {
    position: sticky; top: 0; width: auto; flex-direction: row; align-items: center; overflow-x: auto;
    padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--linha);
  }
  .menu-marca { padding: 0 8px 0 0; }
  .menu-marca span, .menu-item span, .menu-item em { display: none; }
  .menu-itens { flex-direction: row; }
  .menu-rodape { margin: 0 0 0 auto; padding: 0; border: 0; }
  .barra { position: static; padding: 10px 16px; }
  .conteudo { padding: 24px 16px 40px; }
  .rodape { padding: 0 16px 24px; }
}
@media (max-width: 600px) {
  .barra { flex-wrap: wrap; row-gap: 8px; }
  .cabecalho-tela { align-items: flex-start; }
  .cabecalho-tela .meta-tela { flex-wrap: wrap; row-gap: 6px; }
  .periodo-painel { position: fixed; left: 12px; right: 12px; top: 110px; width: auto; }
  .form-grade { grid-template-columns: minmax(0, 1fr); }
  .funil li { grid-template-columns: 110px 1fr 64px 48px; }
  .linha-do-tempo li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .grade-4 { grid-template-columns: minmax(0, 1fr); }
  .span-2, .span-3 { grid-column: auto; }
  .cabecalho-tela h1 { font-size: 28px; }
  .seletor-mes select { max-width: 170px; }
}

/* ---------------- impressão / PDF */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  :root { --fundo: #fff; }
  body { font-size: 12px; }
  .menu, .barra, .faixa-aviso, .rodape { display: none; }
  .principal { margin-left: 0; }
  .conteudo { padding: 0; max-width: none; }
  .cartao, .bloco { break-inside: avoid; box-shadow: none; border: 1px solid #ddd !important; }
}