/* Painel Comercial — segue o design system "Entre Executivo" (tokens.json, bundle.css do sistema).
   Tema claro único: roxo estrutura, laranja só aponta o que foge do padrão (no máximo uma ideia por visual). Sem sombra, sem degradê, sem emoji. */
@font-face { font-family: "Uncut Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/static/fonts/UncutSans-Regular.otf") format("opentype"); }
@font-face { font-family: "Uncut Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/static/fonts/UncutSans-Medium.otf") format("opentype"); }
@font-face { font-family: "Uncut Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/static/fonts/UncutSans-Semibold.otf") format("opentype"); }
@font-face { font-family: "Uncut Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("/static/fonts/UncutSans-Bold.otf") format("opentype"); }

:root {
  color-scheme: light;
  --roxo-principal: #9d4edd;
  --roxo-profundo: #5a189a;
  --laranja-forte: #ff9000;
  --laranja-destaque: #ffaa3b;
  --lilas-claro: #f3e6ff;
  --bege-claro: #ffd8a4;
  --ink: #2b1245;
  --ink-muted: #6b5a80;
  --surface: #ffffff;
  --surface-stripe: #f9f3ff;
  --pessego: #fff1dd;
  --line: #e6d6f7;
  --on-deep: #ffffff;
  --tint: #d3aff0; /* roxo-principal a 45% sobre branco: 4º tom de gráfico empilhado, distinto pela luminosidade */
  --mark: var(--roxo-profundo);
  --mark-soft: var(--roxo-principal);
  --highlight: var(--laranja-forte);
  --font-sans: "Uncut Sans", "Segoe UI", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px;
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: var(--space-8) var(--space-6) 64px; background: var(--surface); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 22px; -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--roxo-profundo); border-radius: var(--radius-sm); }
.wrap { max-width: 1280px; margin: 0 auto; }

/* Logo oficial recortada à marca (assets/Logos) */
.en-logo { display: inline-block; position: relative; overflow: hidden; flex: none; vertical-align: middle; }
.en-logo img { position: absolute; max-width: none; display: block; }

/* Cabeçalho: logo, sobretítulo, título-conclusão, linha de apoio */
header { margin-bottom: var(--space-6); }
header .marca { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
header .sair {
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 0 var(--space-4); height: 32px;
  border-radius: var(--radius-sm); border: 1px dashed var(--roxo-principal); background: var(--surface); color: var(--roxo-profundo); cursor: pointer;
}
header .tag, .kicker {
  display: block; margin: 0 0 var(--space-3); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--roxo-profundo);
}
header h1 { margin: 0; max-width: 1100px; font-size: 34px; line-height: 42px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
header p { margin: var(--space-3) 0 0; max-width: 1040px; font-size: 18px; line-height: 26px; color: var(--ink-muted); }

/* Navegação: etiquetas (Tag) — ativa em roxo-profundo, demais em lilás */
nav.abas { display: flex; gap: var(--space-2); margin: 0 0 var(--space-6); flex-wrap: wrap; }
nav.abas a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-4); border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  background: var(--lilas-claro); color: var(--roxo-profundo);
}
nav.abas a.ativa { background: var(--roxo-profundo); color: var(--on-deep); }

/* Aviso de carga dos dados (Callout): lilás quando ok, bege quando precisa de atenção */
.mock-banner { margin-bottom: var(--space-6); padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); background: var(--pessego); color: var(--ink); font-size: 14px; line-height: 20px; }
.mock-banner.ok { background: var(--lilas-claro); }
.mock-banner strong { color: var(--roxo-profundo); }
.mock-banner[hidden] { display: none; }

section { margin-bottom: var(--space-8); }
h2.section-title { margin: 0 0 var(--space-3); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--roxo-profundo); }
.link-secao { margin-left: var(--space-3); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--roxo-profundo); text-decoration: underline; text-underline-offset: 3px; }

/* KpiTile: lilás padrão, roxo-profundo para a conclusão (um por página), bege para o que pede atenção */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: var(--space-4); }
.kpi-tile { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-6) var(--space-4); border-radius: var(--radius-md); background: var(--lilas-claro); min-width: 0; }
.kpi-tile .label { order: 2; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.kpi-tile .value { order: 1; font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -.02em; color: var(--roxo-profundo); }
.kpi-tile .delta { order: 3; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.kpi-tile.profundo { background: var(--roxo-profundo); }
.kpi-tile.profundo .value { color: var(--laranja-destaque); }
.kpi-tile.profundo .label { color: var(--on-deep); }
.kpi-tile.profundo .delta { color: var(--lilas-claro); }
.kpi-tile.destaque { background: var(--bege-claro); }
.kpi-tile.destaque .value, .kpi-tile.destaque .delta { color: var(--ink); }

/* Callout: leitura de apoio */
.nota { margin: var(--space-3) 0 0; max-width: 1040px; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); background: var(--lilas-claro); font-size: 14px; line-height: 20px; color: var(--ink); }
.nota strong { color: var(--roxo-profundo); font-weight: 600; }
.nota small { font-size: inherit; color: var(--ink-muted); }

/* Cartões de gráfico e tabela: branco com fio, sem sombra */
.chart-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.chart-row.two { grid-template-columns: repeat(2, 1fr); }
.chart-row.um { grid-template-columns: 1fr; }
.chart-row.dois-um { grid-template-columns: 2fr 1fr; }
.chart-card { min-width: 0; padding: var(--space-4) var(--space-6) var(--space-4); border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.chart-card h3 { margin: 0 0 var(--space-3); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); }
.chart-card .sub { margin: calc(-1 * var(--space-2)) 0 var(--space-3); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.aviso-vazio { margin: var(--space-2) 0; font-size: 14px; color: var(--ink-muted); }

/* Gráficos (SVG) */
svg.chart { width: 100%; height: 160px; overflow: visible; }
.axis-label { font-family: var(--font-sans); font-size: 10.5px; fill: var(--ink-muted); }
.gridline { stroke: var(--line); stroke-width: 1; }
.baseline { stroke: var(--ink); stroke-width: 1.5; }
.bar { fill: var(--mark); }
.bar.destaque { fill: var(--highlight); }
.bar-label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; fill: var(--ink); }
.cat-label { font-family: var(--font-sans); font-size: 12px; fill: var(--ink); }
.chart-wrap { position: relative; }
.hit { fill: transparent; }

.c1 { --c: var(--roxo-profundo); } .c2 { --c: var(--roxo-principal); } .c3 { --c: var(--ink-muted); } .c4 { --c: var(--tint); }
.c5 { --c: var(--line); } .c6 { --c: var(--roxo-principal); } .c7 { --c: var(--ink); }
.seg { fill: var(--c); stroke: #fff; stroke-width: 1; }
.linha { fill: none; stroke: var(--c); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.linha.tracejada { stroke-dasharray: 5 4; stroke-width: 2; }
.ponto { fill: var(--c); }
.c6 .linha { stroke-dasharray: 5 4; stroke-width: 2; }  /* c6 = o "antes" (bruto): tracejado em roxo-principal, como a barra fantasma */
.seg.c6 { fill: var(--line); stroke: var(--roxo-principal); stroke-dasharray: 3 2; stroke-width: 1.2; }
.destaque-ponto { fill: var(--highlight); stroke: #fff; stroke-width: 1.5; }
.destaque-rotulo { font-family: var(--font-sans); font-size: 11px; font-weight: 600; fill: var(--ink); }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-2); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.legend > span { display: inline-flex; align-items: center; gap: 6px; }
.legend .swatch { flex: none; display: inline-block; }
.legend .swatch.cor { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.legend .swatch.cor-linha { width: 16px; height: 3px; border-radius: 2px; background: var(--c); }
.legend .c6 .swatch.cor, .legend .c6 .swatch.cor-linha { background: var(--line); border: 1px dashed var(--roxo-principal); height: 10px; border-radius: 3px; }

.tooltip {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0; transform: translate(-50%, -110%); white-space: nowrap; transition: opacity .1s;
  padding: 6px 10px; border-radius: var(--radius-sm); background: var(--ink); color: var(--on-deep); font-size: 12px; line-height: 16px;
}

/* DataTable: cabeçalho lilás, listras, números à direita */
details.table-toggle { margin-top: var(--space-2); }
details.table-toggle summary { font-size: 12px; font-weight: 600; color: var(--roxo-profundo); cursor: pointer; user-select: none; }
table.data-table, table.tab { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: var(--radius-md); overflow: hidden; font-size: 13px; line-height: 18px; }
table.data-table { margin-top: var(--space-2); }
table.data-table th, table.data-table td, table.tab th, table.tab td { padding: var(--space-2) var(--space-3); text-align: right; border-bottom: 1px solid var(--line); }
table.data-table th:first-child, table.data-table td:first-child, table.tab th:first-child, table.tab td:first-child { text-align: left; }
table.data-table th, table.tab th { background: var(--lilas-claro); color: var(--roxo-profundo); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; vertical-align: bottom; border-bottom: 0; }
table.data-table tbody tr:nth-child(even) td, table.tab tbody tr:nth-child(even) td { background: var(--surface-stripe); }
table.tab tr.fora td { color: var(--ink-muted); font-style: italic; }
table.tab td small { color: var(--ink-muted); }
table.tab td .mini { display: inline-block; height: 8px; border-radius: 3px; background: var(--roxo-principal); vertical-align: middle; margin-right: 6px; }

/* Cartões de família dos serviços adicionais (Resumo) */
.sva-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); }
.sva-card { padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.sva-card h4 { margin: 0 0 var(--space-2); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--roxo-profundo); }
.sva-card .row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 3px 0; font-size: 14px; color: var(--ink); }
.sva-card .row .num { font-weight: 700; }

footer { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--ink-muted); }

@media (max-width: 900px) {
  body { padding: var(--space-6) var(--space-4) 48px; }
  header h1 { font-size: 26px; line-height: 32px; }
  header p { font-size: 16px; line-height: 24px; }
  .chart-row, .chart-row.two, .chart-row.dois-um, .sva-grid { grid-template-columns: 1fr; }
}

/* Filtros das abas: barra fixa no topo, etiquetas dos filtros ativos e elementos clicáveis que viram filtro */
.filtros { position: sticky; top: 0; z-index: 6; margin: 0 0 var(--space-4); padding: var(--space-3) 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.filtros-linha { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); align-items: flex-end; }
.filtro { display: flex; flex-direction: column; gap: 4px; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.filtro select, .filtro input {
  height: 36px; min-width: 150px; max-width: 240px; padding: 0 10px; font: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: var(--lilas-claro); color: var(--roxo-profundo); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.chip.limpar { background: var(--surface); box-shadow: inset 0 0 0 1px var(--roxo-principal); }
[data-filtros] { cursor: pointer; }
table.tab tr.clicavel:hover td { background: var(--lilas-claro); }
table.tab tr.clicavel.ativo td { background: var(--pessego); font-weight: 600; }
rect.hit[data-filtros]:hover { fill: color-mix(in srgb, var(--roxo-principal) 12%, transparent); }
rect.seg.hit[data-filtros]:hover { opacity: .8; }
@media (max-width: 900px) { .filtros { position: static; } .filtro select, .filtro input { min-width: 130px; } }

/* linha que pede atenção (ex.: cliente ativo com retirada de equipamento aberta): pêssego, como os avisos */
table.tab tbody tr.destaque-linha td { background: var(--pessego); font-weight: 600; }

/* Download em CSV (cartões e gráficos): link discreto, sem botão */
.csv-link { order: 4; align-self: flex-start; margin-top: var(--space-2); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--roxo-profundo); text-decoration: underline; text-underline-offset: 2px; }
.csv-link:hover, .csv-link:focus-visible { color: var(--roxo-principal); }
.kpi-tile.profundo .csv-link { color: var(--lilas-claro); }
.kpi-tile.profundo .csv-link:hover, .kpi-tile.profundo .csv-link:focus-visible { color: var(--on-deep); }
.csv-rodape { margin: var(--space-3) 0 0; }