/* ===========================================================================
   CARRINHO ABANDONADO — El Misti
   Tokens copiados de Times/Time de TI/design-system/tokens/tokens.css
   (o DS manda copiar os valores em vez de referenciar por caminho relativo
   entre repositorios diferentes — o que importa e nome e valor baterem).
   =========================================================================== */

:root {
  --color-brand-primary: #1B5E20;
  --color-brand-primary-light: #2E7D32;
  --color-brand-primary-bg: #E8F5E9;
  --color-brand-dark: #0D2818;

  --color-surface: #f5f7f5;
  --color-surface-card: #ffffff;
  --color-border: #d5e0d5;

  --color-text: #1a2e1a;
  --color-text-muted: #5f7060;
  --color-heading: var(--color-brand-dark);

  --color-success-text: #2E7D32;
  --color-danger-text: #C62828;
  --color-info-text: #1565C0;
  --color-warning-text: #B26A00;
  --color-accent-text: #00695C;
  --color-purple-text: #6A1B9A;

  --color-success-fill: #2E7D32;
  --color-danger-fill: #C62828;
  --color-info-fill: #1565C0;
  --color-warning-fill: #F9A825;
  --color-accent-fill: #00897B;
  --color-ga4: #4285F4;

  --color-table-head-bg: var(--color-brand-primary-bg);
  --color-hover-bg: var(--color-brand-primary-bg);
  --color-hachure-bg: repeating-linear-gradient(135deg, rgba(95,112,96,.16), rgba(95,112,96,.16) 4px, rgba(95,112,96,.04) 4px, rgba(95,112,96,.04) 8px);

  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fs-2xs: 9px; --fs-xs: 10px; --fs-sm: 11px; --fs-base: 12px;
  --fs-md: 13px; --fs-lg: 14px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 28px;
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;
  --lh-tight: 1.2; --lh-base: 1.3; --lh-relaxed: 1.5;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px;
  --shadow-sm: 0 1px 3px rgba(0,40,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --touch-target: 44px;
}

[data-theme="dark"] {
  --color-surface: #10160f;
  --color-surface-card: #1a231a;
  --color-border: #2c3a2c;
  --color-text: #e6ede6;
  --color-text-muted: #8fa08f;
  --color-heading: #eafaea;

  --color-success-text: #81C784;
  --color-danger-text: #EF5350;
  --color-info-text: #64B5F6;
  --color-warning-text: #FFCC80;
  --color-accent-text: #4DB6AC;
  --color-purple-text: #CE93D8;

  --color-table-head-bg: rgba(46,125,50,.22);
  --color-hover-bg: rgba(46,125,50,.14);
  --color-hachure-bg: repeating-linear-gradient(135deg, rgba(230,237,230,.10), rgba(230,237,230,.10) 4px, rgba(230,237,230,.02) 4px, rgba(230,237,230,.02) 8px);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  background: var(--color-surface);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header ---------- */
.header {
  background: var(--color-brand-dark);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.header-logo-img { height: 28px; width: auto; flex-shrink: 0; }
.header-centro { flex: 1; text-align: center; min-width: 0; }
.header-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: .2px; }
.header-sub { font-size: var(--fs-xs); opacity: .75; margin-top: 2px; }
/* Idade dos dados — mesmo comportamento dos outros painéis: discreto quando
   está tudo em dia; amarelo quando uma fonte atrasa (3x o próprio ritmo) e
   vermelho quando parou (12x). Parar de receber dado não dá erro na tela:
   sem este aviso, o painel continuaria bonito e velho. */
.header-update { font-size: 11px; opacity: .7; text-align: right; min-width: 140px; cursor: help; }
.header-update.is-stale { opacity: 1; font-weight: 700; color: #FFD54F; }
.header-update.is-broken { opacity: 1; font-weight: 700; color: #FF8A80; }
@media (max-width: 640px) { .header-sub, .header-update { display: none; } }
.theme-btn {
  background: rgba(255,255,255,.12); border: 0; color: #fff; cursor: pointer;
  width: 34px; height: 34px; border-radius: var(--radius-full); font-size: var(--fs-md);
}
.theme-btn:hover { background: rgba(255,255,255,.22); }

/* ---------- Aviso de corte (sempre visivel, todas as abas) ---------- */
.aviso-corte {
  background: rgba(249,168,37,.14);
  border-bottom: 1px solid var(--color-border);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--color-warning-text);
  line-height: var(--lh-relaxed);
}
.aviso-corte strong { font-weight: var(--fw-bold); }
.aviso-toggle {
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: var(--fs-xs); text-decoration: underline; padding: 0 var(--sp-1);
}
.aviso-detalhe { display: none; margin-top: var(--sp-2); }
.aviso-detalhe.aberto { display: block; }
.aviso-detalhe ul { margin: var(--sp-1) 0 0 var(--sp-4); }

/* ---------- Filtros ---------- */
.filtros {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-surface-card);
  border-bottom: 1px solid var(--color-border);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end;
}
.filtro { display: flex; flex-direction: column; gap: var(--sp-1); }
.filtro-label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .5px;
  color: var(--color-text-muted); font-weight: var(--fw-semibold);
}
.filtro select {
  font-family: inherit; font-size: var(--fs-md);
  padding: var(--sp-2) var(--sp-3); min-height: var(--touch-target);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface-card); color: var(--color-text); cursor: pointer;
}
.filtro-info { margin-left: auto; font-size: var(--fs-xs); color: var(--color-text-muted); text-align: right; }

/* ---------- Abas ---------- */
.abas { display: flex; gap: var(--sp-1); padding: 0 var(--sp-4); background: var(--color-surface-card); border-bottom: 1px solid var(--color-border); overflow-x: auto; }
.aba-btn {
  font-family: inherit; font-size: var(--fs-md); font-weight: var(--fw-semibold);
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: var(--sp-3) var(--sp-4); cursor: pointer; color: var(--color-text-muted); white-space: nowrap;
}
.aba-btn:hover { color: var(--color-text); }
.aba-btn.ativa { color: var(--color-brand-primary-light); border-bottom-color: var(--color-brand-primary); }
[data-theme="dark"] .aba-btn.ativa { color: var(--color-success-text); border-bottom-color: var(--color-success-text); }

.painel { display: none; padding: var(--sp-4); }
.painel.ativo { display: block; }

/* ---------- Cards e KPIs ---------- */
.section-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.section-title {
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  color: var(--color-heading); margin-bottom: var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.section-desc { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: var(--lh-relaxed); margin-bottom: var(--sp-3); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-3); }
.kpi-card {
  background: var(--color-surface-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--sp-3); box-shadow: var(--shadow-sm);
}
.kpi-card.destaque { border-color: var(--color-brand-primary-light); border-width: 2px; }
.kpi-label {
  font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .6px;
  color: var(--color-text-muted); font-weight: var(--fw-semibold);
  display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap;
}
.kpi-value { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--color-heading); line-height: var(--lh-tight); margin: var(--sp-1) 0; }
.kpi-value.positivo { color: var(--color-success-text); }
.kpi-sub { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: var(--lh-relaxed); }

/* ---------- Badge de fonte (informacao de primeira classe) ---------- */
.badge {
  display: inline-block; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .4px;
  padding: 2px var(--sp-2); border-radius: var(--radius-full); white-space: nowrap;
}
.badge-ga4 { color: var(--color-ga4); background: rgba(66,133,244,.15); }
.badge-obs { color: var(--color-accent-text); background: rgba(0,137,123,.15); }
.badge-off { color: var(--color-text-muted); background: rgba(95,112,96,.15); }
.badge-alerta { color: var(--color-warning-text); background: rgba(249,168,37,.18); }
/* Situacao "Ja reservou" na aba Carrinhos: o mesmo verde da Saude "Medindo". */
.badge-ok { color: var(--color-success-text); background: rgba(46,125,50,.15); }
/* Divisao por fonte dentro do cartao da aba Desempenho: observador + cloudbeds = numero grande. */
.kpi-fontes { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--color-text-muted); }

.info-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: var(--radius-full);
  background: var(--color-border); color: var(--color-text-muted);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); cursor: help; flex-shrink: 0;
}

/* ---------- Funil em barras horizontais ---------- */
.funil { display: flex; flex-direction: column; gap: var(--sp-3); }
.degrau { display: flex; flex-direction: column; gap: var(--sp-1); }
.degrau-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.degrau-rotulo { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); display: flex; align-items: center; gap: var(--sp-2); }
.degrau-valor { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-heading); font-variant-numeric: tabular-nums; }
.degrau-trilho { height: 22px; background: var(--color-surface); border-radius: var(--radius-sm); overflow: hidden; }
.degrau-barra { height: 100%; background: var(--color-brand-primary-light); border-radius: var(--radius-sm); transition: width .3s ease; min-width: 2px; }
.degrau-barra.corte-novo { background: var(--color-accent-fill); }
.degrau-barra.corte-atual { background: var(--color-warning-fill); }
.degrau-barra.compra { background: var(--color-brand-primary); }
.degrau-barra.sem-medicao { background: var(--color-hachure-bg); }
.degrau-rodape { display: flex; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.queda-forte { color: var(--color-danger-text); font-weight: var(--fw-bold); }

.marcador-corte {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: .4px; padding: 2px var(--sp-2); border-radius: var(--radius-sm);
}
.marcador-corte.novo { color: var(--color-accent-text); background: rgba(0,137,123,.15); }
.marcador-corte.atual { color: var(--color-warning-text); background: rgba(249,168,37,.18); }

/* ---------- Tabela ---------- */
.tabela-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th {
  text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px;
  color: var(--color-text-muted); font-weight: var(--fw-semibold);
  background: var(--color-table-head-bg); padding: var(--sp-2) var(--sp-3); white-space: nowrap;
}
td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
tr:hover td { background: var(--color-hover-bg); }
td.num, th.num { text-align: right; }
.destaque-num { font-weight: var(--fw-bold); color: var(--color-accent-text); }

/* ---------- Tabela densa (carrinhos: 12 colunas) ----------
   Doze colunas não cabem numa tela sem alguma decisão. As tomadas aqui, na
   ordem em que importam:

   1. `table-layout: fixed` + `width: auto`. Sem isso o navegador negocia a
      largura pelo conteúdo, e uma única linha com e-mail comprido estica a
      coluna e espreme todas as outras — a tabela muda de forma conforme os
      dados, que é o pior tipo de layout para ler todo dia.
   2. Fonte um degrau menor SÓ AQUI. A tabela de propriedades tem 4 colunas e
      continua no tamanho normal; encolher tudo por causa desta seria pagar o
      preço no lugar errado.
   3. Rolagem horizontal assumida (o `.tabela-wrap` já dá), com as duas
      primeiras colunas fixas: rolando para ver quarto e tarifa, a pessoa não
      perde de vista de quem e de qual hotel é a linha.
   4. Nada de quebra de palavra. Linha de altura variável em tabela comprida
      destrói a leitura em varredura vertical, que é como esta tela é usada. */
.tabela-densa { font-size: var(--fs-xs); table-layout: fixed; width: auto; min-width: 100%; }
.tabela-densa th, .tabela-densa td {
  padding: var(--sp-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* As larguras seguem a chance de o campo ser longo, não a ordem na tela. */
/* Somadas, as oito primeiras dao ~900px: cabem numa tela de notebook sem
   rolar. E ate a oitava esta tudo que decide ACAO — quem e, como falar, e
   quanto estava em jogo. O que vem depois e contexto e pode ficar atras da
   rolagem sem prejuizo. */
.tabela-densa th:nth-child(1)  { width: 76px;  }   /* Quando      */
.tabela-densa th:nth-child(2)  { width: 100px; }   /* Propriedade */
.tabela-densa th:nth-child(3)  { width: 112px; }   /* Nome        */
.tabela-densa th:nth-child(4)  { width: 178px; }   /* E-mail      */
.tabela-densa th:nth-child(5)  { width: 112px; }   /* Telefone    */
.tabela-densa th:nth-child(6)  { width: 124px; }   /* Parou em    */
.tabela-densa th:nth-child(7)  { width: 100px; }   /* Estadia     */
.tabela-densa th:nth-child(8)  { width: 110px; }   /* Valor       */
.tabela-densa th:nth-child(9)  { width: 138px; }   /* Quarto      */
.tabela-densa th:nth-child(10) { width: 138px; }   /* Tarifa      */
.tabela-densa th:nth-child(11) { width: 88px;  }   /* Aparelho    */
.tabela-densa th:nth-child(12) { width: 88px;  }   /* Fonte       */

/* Coluna congelada. O fundo tem que ser OPACO, e isso deu trabalho:

   `--color-table-head-bg` e `--color-hover-bg` sao translucidos no tema escuro
   (rgba com alpha .22 e .14). Numa celula comum isso e proposital — a cor se
   mistura com o card. Numa celula sticky e um defeito visivel: o conteudo das
   outras colunas rola POR BAIXO e aparece atraves dela. No teste, o cabecalho
   mostrou "NOME" atravessando "QUANDO", e a linha mostrou o resto de um nome
   surgindo dentro da coluna de data.

   A correcao e pintar a cor translucida SOBRE uma base opaca, em duas camadas
   de background: o gradiente de cor unica e a cor original, e
   `--color-surface-card` (a cor do cartao onde a tabela vive) e o fundo. */
.tabela-densa th:nth-child(1), .tabela-densa td:nth-child(1) {
  position: sticky; left: 0; z-index: 2; background: var(--color-surface-card);
}
.tabela-densa thead th:nth-child(1) {
  z-index: 3;
  background:
    linear-gradient(var(--color-table-head-bg), var(--color-table-head-bg)),
    var(--color-surface-card);
}
.tabela-densa tr:hover td:nth-child(1) {
  background:
    linear-gradient(var(--color-hover-bg), var(--color-hover-bg)),
    var(--color-surface-card);
}

/* Marca da moeda estimada (asterisco) no valor. */
.valor-marca { color: var(--color-text-muted); cursor: help; }

/* Selo da FONTE do registro (observador x Cloudbeds). Fundo próprio, em cores
   fora das quatro da Situação (âmbar, cinza, verde, verde-azulado). */
.badge-fonte-obs { color: var(--color-info-text); background: rgba(21,101,192,.12); }
[data-theme="dark"] .badge-fonte-obs { background: rgba(100,181,246,.16); }
.badge-fonte-cb { color: #AD1457; background: rgba(173,20,87,.10); }
[data-theme="dark"] .badge-fonte-cb { color: #F48FB1; background: rgba(244,143,177,.16); }

.celula-forte { font-weight: var(--fw-semibold); }
.celula-nota { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
/* Aviso visual de que há mais texto atrás do corte. */
.celula-corta { border-bottom: 1px dotted var(--color-border); cursor: help; }
.badge-neutro { color: var(--color-text-muted); background: var(--color-table-head-bg); }

/* ---------- Estados ---------- */
.estado { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--color-text-muted); }
.estado-icone { font-size: var(--fs-3xl); opacity: .4; margin-bottom: var(--sp-2); }
.estado-titulo { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--color-text); margin-bottom: var(--sp-1); }
.estado-desc { font-size: var(--fs-sm); line-height: var(--lh-relaxed); max-width: 480px; margin: 0 auto; }
.estado-erro .estado-titulo { color: var(--color-danger-text); }

@media (max-width: 640px) {
  .filtros { padding: var(--sp-3); }
  .filtro { flex: 1 1 140px; }
  .filtro select { width: 100%; }
  .painel { padding: var(--sp-3); }
  .kpi-value { font-size: var(--fs-3xl); }
  .degrau-rodape { flex-direction: column; gap: 2px; }
}

/* ---------------------------------------------------------------------------
   Aba Saúde
   A cor sozinha não carrega o significado: cada pílula tem texto próprio
   ("Medindo", "Parou"). Quem não distingue verde de vermelho — e são muitos —
   lê a mesma informação.
--------------------------------------------------------------------------- */
.saude-grupo {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  margin: var(--sp-6) 0 var(--sp-3);
}
.saude-grupo:first-of-type { margin-top: var(--sp-4); }

.saude-pill {
  display: inline-block;
  padding: 2px var(--sp-2);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}
.saude-ok      { color: var(--color-success-text); background: rgba(46,125,50,.15); }
.saude-atencao { color: var(--color-warning-text); background: rgba(249,168,37,.18); }
.saude-alarme  { color: var(--color-danger-text);  background: rgba(198,40,40,.15); }
/* "Sem sinal" é neutro de propósito: peça que ainda não subiu não é falha. */
.saude-mudo    { color: var(--color-text-muted);   background: var(--color-hachure-bg); }

.celula-fraca { color: var(--color-text-muted); font-size: var(--fs-sm); }

.kpi-de {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  margin-left: var(--sp-2);
}

/* Equivalente em outra moeda: menor e apagado de propósito. É referência de
   grandeza, não um segundo número para somar. */
.valor-equiv {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* Legenda de leitura dos KPIs. Existe porque a primeira pessoa a usar o painel
   tentou somar e subtrair os números entre si — e a culpa era da tela. */
.legenda-leitura {
  background: var(--color-brand-primary-bg);
  border-left: 3px solid var(--color-brand-primary);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}
.legenda-leitura ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); }
.legenda-leitura li { margin-bottom: var(--sp-2); }
.legenda-leitura li:last-child { margin-bottom: 0; }

/* ===========================================================================
   Aba DESEMPENHO — 26/09/2026
   Cores das séries validadas para daltonismo com o validador do guia de
   visualização (scripts/validate_palette.js), nos DOIS temas: claro contra o
   branco do card, escuro contra #1a231a. No claro a 3ª cor fica abaixo de 3:1
   de contraste com o fundo — por isso as linhas levam nome na ponta e o
   gráfico tem tabela. Não trocar uma cor sem rodar o validador de novo.
   =========================================================================== */
:root {
  --serie-1: #2a78d6;   /* entregues */
  --serie-2: #eb6834;   /* abertos   */
  --serie-3: #1baf7a;   /* clicados  */
  --serie-4: #eda100;   /* reservas (validada com as 3 acima em 26/09) */
}
[data-theme="dark"] {
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --serie-4: #c98500;
}

.filtros-locais { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.filtros-locais select { font: inherit; font-size: var(--fs-base); padding: 4px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface-card); color: var(--color-text); }
.filtro-nota { font-size: var(--fs-sm); color: var(--color-text-muted); }

.nota-contexto { font-size: var(--fs-md); line-height: var(--lh-relaxed); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); background: var(--color-brand-primary-bg); color: var(--color-text); margin-bottom: var(--sp-3); }
[data-theme="dark"] .nota-contexto { background: rgba(46,125,50,.14); }

.glossario { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); background: var(--color-surface-card); }
.glossario summary { cursor: pointer; font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--color-heading); padding: var(--sp-1) 0; }
.glossario ul { margin: var(--sp-2) 0 var(--sp-2); padding-left: var(--sp-4); font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.glossario li { margin-bottom: var(--sp-2); }

.kpi-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--sp-4); }

.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 860px) { .grade-2 { grid-template-columns: 1fr; } }

.bloco { margin-bottom: var(--sp-5); }
.bloco-titulo { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--color-heading); margin-bottom: var(--sp-3); }
.bloco-sub { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--color-text-muted); }

.badge-ab { color: var(--color-purple-text); background: rgba(106,27,154,.12); }
[data-theme="dark"] .badge-ab { background: rgba(206,147,216,.16); }

/* Leituras: retrato → leitura → recomendação */
.insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--sp-3); }
@media (min-width: 1300px) { .insights { grid-template-columns: repeat(3, 1fr); } }
.insight { border: 1px solid var(--color-border); border-left: 3px solid var(--color-brand-primary-light); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); background: var(--color-surface-card); }
.insight-qualidade, .insight-entrega { border-left-color: var(--color-warning-fill); }
.insight-ab { border-left-color: var(--color-purple-text); }
.insight-topo { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-2); }
.insight-tema { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); font-weight: var(--fw-semibold); }
.insight-titulo { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--color-heading); line-height: var(--lh-tight); }
.insight-linha { font-size: var(--fs-base); line-height: var(--lh-relaxed); margin-top: var(--sp-2); color: var(--color-text); }
.insight-rotulo { display: block; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); margin-bottom: 1px; }
.insight-reco { background: var(--color-brand-primary-bg); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); }
[data-theme="dark"] .insight-reco { background: rgba(46,125,50,.14); }

/* Gráfico de linha */
.legenda { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--color-text-muted); margin-bottom: var(--sp-2); }
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.legenda-cor { display: inline-block; width: 12px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.legenda-cor.s1 { background: var(--serie-1); }
.legenda-cor.s2 { background: var(--serie-2); }
.legenda-cor.s3 { background: var(--serie-3); }
.legenda-cor.s4 { background: var(--serie-4); }
.grafico-linha { position: relative; }
.grafico-linha svg { display: block; overflow: visible; }
.grafico-linha .grade { stroke: var(--color-border); stroke-width: 1; }
.grafico-linha .eixo { font-size: 10px; fill: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.grafico-linha .linha { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico-linha .linha.s1 { stroke: var(--serie-1); }
.grafico-linha .linha.s2 { stroke: var(--serie-2); }
.grafico-linha .linha.s3 { stroke: var(--serie-3); }
.grafico-linha .linha.s4 { stroke: var(--serie-4); }
.grafico-linha .ponta { stroke: var(--color-surface-card); stroke-width: 2; }
.grafico-linha .ponta.s1 { fill: var(--serie-1); }
.grafico-linha .ponta.s2 { fill: var(--serie-2); }
.grafico-linha .ponta.s3 { fill: var(--serie-3); }
.grafico-linha .ponta.s4 { fill: var(--serie-4); }
.grafico-linha .rotulo-ponta { font-size: 11px; fill: var(--color-text); }
.grafico-linha .cursor { stroke: var(--color-text-muted); stroke-width: 1; opacity: 0; }
.grafico-linha .alvo { fill: transparent; cursor: crosshair; }
.dica-grafico { position: absolute; top: 8px; min-width: 150px; pointer-events: none; opacity: 0; transition: opacity .1s; background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); color: var(--color-text); line-height: 1.6; }
.dica-nota { color: var(--color-text-muted); border-top: 1px solid var(--color-border); margin-top: 4px; padding-top: 4px; }

.botao-link { margin-left: auto; background: none; border: none; padding: 0; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--color-info-text); cursor: pointer; text-decoration: underline; }
.oculto { display: none; }
.tabela-compacta td, .tabela-compacta th { padding-top: 4px; padding-bottom: 4px; }

/* Medidor dentro da célula: o número segue escrito */
.medidor { display: flex; align-items: center; gap: var(--sp-2); min-width: 120px; }
.medidor-trilho { flex: 1; height: 6px; background: var(--color-table-head-bg); border-radius: 3px; overflow: hidden; min-width: 50px; }
.medidor-barra { height: 100%; background: var(--color-brand-primary-light); border-radius: 3px; }
.medidor span { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); min-width: 42px; text-align: right; }

.linha-fraca td { color: var(--color-text-muted); }
.celula-assunto { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.rodape-frescor { font-size: var(--fs-sm); color: var(--color-text-muted); line-height: var(--lh-relaxed); border-top: 1px solid var(--color-border); padding-top: var(--sp-3); margin-top: var(--sp-2); }

/* Desempenho v1.1 — 26/09/2026 */
.kpi-grid-5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: var(--sp-4); }
.kpi-destaque { border-color: var(--color-purple-text); }
.kpi-destaque .kpi-value { color: var(--color-purple-text); }
.kpi-sub .celula-fraca { font-size: inherit; }
.degrau-pct { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--color-text-muted); margin-left: 4px; }
.bloco-alerta { border: 1px solid var(--color-warning-fill); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); background: rgba(249,168,37,.06); }
[data-theme="dark"] .bloco-alerta { background: rgba(255,204,128,.06); }
.alternador { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; margin-left: var(--sp-3); }
.alt-btn { background: var(--color-surface-card); border: none; padding: 3px 10px; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--color-text-muted); cursor: pointer; }
.alt-btn + .alt-btn { border-left: 1px solid var(--color-border); }
.alt-btn.ativo { background: var(--color-brand-primary-bg); color: var(--color-heading); font-weight: var(--fw-semibold); }
[data-theme="dark"] .alt-btn.ativo { background: rgba(46,125,50,.22); }
.lista-conf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-md); line-height: var(--lh-relaxed); }
.lista-conf li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.conf-marca { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--fw-bold); margin-top: 1px; }
.conf-ok .conf-marca { background: var(--color-brand-primary-bg); color: var(--color-success-text); }
.conf-atencao .conf-marca { background: rgba(249,168,37,.18); color: var(--color-warning-text); }

/* Botoes de exportacao (abas Carrinhos e Desempenho). */
.botao-exportar { border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-decoration: none; display: inline-block; }

/* Linha de total por conta no bloco "Como o GHL conta". */
.linha-total td { background: var(--color-table-head-bg); }