/* =============================================================================
   Tatos Dash — sistema visual

   Tema claro apenas — decisão do produto, não limitação. Não há alternância nem
   `prefers-color-scheme`: o painel tem uma aparência só.

   A paleta não foi escolhida no olho. A rampa do funil (azul da marca, 6 passos)
   e os três slots categóricos foram validados com o validador de paletas contra
   a superfície clara (#FBFCFD): rampa ordinal monótona em L, degraus >= 0.06,
   ponta clara acima de 2:1 contra a superfície; categóricos dentro da banda de
   luminosidade, acima do piso de croma e com separação sob daltonismo
   (ΔE >= 8, all-pairs). Trocar um hex aqui exige rodar o validador de novo.
   ============================================================================= */

:root {
  color-scheme: light;

  --page:            #F4F7F9;
  --surface:         #FBFCFD;
  --surface-2:       #F0F4F7;

  --ink:             #10181F;
  --ink-2:           #52606B;
  --ink-muted:       #8994A0;

  --grid:            #E4EAEF;
  --axis:            #C9D3DA;
  --border:          rgba(16, 24, 31, .10);
  --border-forte:    rgba(16, 24, 31, .16);

  /* rampa ordinal do funil — claro (topo) → escuro (fundo) */
  --f1: #7FB4D9;  --f2: #5BA0CC;  --f3: #3789BE;
  --f4: #12629F;  --f5: #0E4E7E;  --f6: #0A3A5E;

  /* categóricos: identidade (produto, série) */
  --s1: #12629F;  --s2: #EB6834;  --s3: #1BAF7A;

  /* status — reservados, nunca usados como série */
  --bom:      #0CA30C;
  --atencao:  #FAB219;
  --serio:    #EC835A;
  --critico:  #D03B3B;
  --bom-texto:#006300;

  --sombra:   0 1px 2px rgba(16, 24, 31, .04), 0 8px 24px rgba(16, 24, 31, .06);
  --r:        14px;
  --r-sm:     9px;

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }

/* ------------------------------------------------------------------ topo -- */

.topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 20px;
  padding: 0 24px; height: 60px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topo .marca { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; }
.topo .marca img { height: 26px; width: auto; display: block; }
.topo .cresce { flex: 1; }

/* abas de produto — identidade principal da navegação */
.abas { display: flex; gap: 4px; background: var(--surface-2); padding: 3px; border-radius: 10px; }
.abas button {
  border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
  font: inherit; font-weight: 600; font-size: 13.5px; padding: 7px 15px; border-radius: 8px;
  transition: background .12s, color .12s;
}
.abas button:hover { color: var(--ink); }
.abas button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* -------------------------------------------------------------- filtros --- */
/* Uma linha só, acima de tudo que ela recorta. Filtro dentro de card produz
   telas em que dois gráficos mostram períodos diferentes. */

.filtros {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 16px 24px 0;
}
.campo { position: relative; }
.campo > label {
  display: block; font-size: 11px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-muted); margin-bottom: 5px;
}
select, input[type="date"], input[type="text"], input[type="password"], input[type="email"], .botao {
  font: inherit; font-size: 14px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-forte);
  border-radius: var(--r-sm); padding: 8px 12px; height: 38px;
}

/* Controles de formulário encolhem com a coluna.
   Item de grid nasce com `min-width: auto`, ou seja, "nunca menor que meu
   conteúdo". Um <select> cuja opção mais longa é "Status do Lead-CGI ·
   status_do_lead_cgi" empurra a coluna inteira e estoura o card — que foi
   exatamente o que aconteceu na tela de Configuração. `min-width: 0` nos itens
   e `width: 100%` nos controles é a correção; sem ela, qualquer opção longa
   nova quebra o layout de novo. */
select, input[type="date"], input[type="text"], input[type="password"], input[type="email"] {
  width: 100%; min-width: 0; max-width: 100%;
}
select { text-overflow: ellipsis; }
select:focus-visible, input:focus-visible, button:focus-visible {
  outline: 2px solid var(--s1); outline-offset: 2px;
}
.botao { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.botao:hover { background: var(--surface-2); }
.botao.primario { background: var(--s1); border-color: transparent; color: #fff; }
.botao.primario:hover { filter: brightness(1.08); }
.botao[disabled] { opacity: .55; cursor: default; }

/* ---------------------------------------------------------------- grade --- */

.grade { padding: 18px 24px 40px; display: grid; gap: 16px; }
.linha { display: grid; gap: 16px; }
@media (min-width: 1100px) {
  /* start, não stretch: o funil é mais alto que os cartões de custo, e esticar
     o cartão da esquerda só produz um vazio branco de 200px. */
  .linha.investimento-funil { grid-template-columns: minmax(0, 1fr) minmax(360px, .78fr); align-items: start; }
  .linha.duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cartao {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); padding: 20px; box-shadow: var(--sombra);
  min-width: 0;   /* deixa o conteúdo encolher em vez de estourar a grade */
}
.cartao > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.cartao h2 { font-size: 14px; font-weight: 650; }
.cartao .nota { font-size: 12.5px; color: var(--ink-muted); }

/* ------------------------------------------------------ números e cartões -- */

.hero .rotulo { font-size: 13px; color: var(--ink-2); margin-bottom: 2px; }
.hero .valor {
  font-size: 52px; line-height: 1.05; font-weight: 660; letter-spacing: -.025em;
  /* figuras proporcionais de propósito: tabular deixa número grande frouxo */
}
.hero .prefixo { font-size: .55em; font-weight: 600; color: var(--ink-2); margin-right: 4px; }

.delta { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; }
.delta .seta { font-size: 11px; }
.delta.subiu { color: var(--bom-texto); }
.delta.caiu  { color: var(--critico); }
.delta.neutro { color: var(--ink-muted); font-weight: 500; }
.delta .ref { color: var(--ink-muted); font-weight: 500; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 12px; }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 14px 15px;
}
.kpi .rotulo { font-size: 12px; font-weight: 650; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.kpi .ponto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.kpi .valor { font-size: 26px; font-weight: 640; letter-spacing: -.02em; margin: 6px 0 3px; }
.kpi .sub { font-size: 12px; color: var(--ink-muted); }
/* Modificador do VALOR do cartão — nome próprio de propósito: `.vazio` já é o
   estado vazio de seção, com padding grande, e a colisão inchava o cartão. */
.kpi .valor.sem-dado { color: var(--ink-muted); font-weight: 500; font-size: 22px; }

/* ---------------------------------------------------------------- funil --- */
/* Barras horizontais, não o trapézio do PowerBI: no trapézio a área não é
   proporcional ao valor, então a queda parece maior ou menor do que é. */

.funil { display: grid; gap: 11px; }
.etapa { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 8px; }
.etapa .nome { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.etapa .qtd { font-size: 15px; font-weight: 660; font-variant-numeric: tabular-nums; }
.etapa .trilho {
  grid-column: 1 / -1; height: 22px; background: var(--surface-2);
  border-radius: 5px; overflow: visible; position: relative;
}
.etapa .barra {
  height: 100%; border-radius: 2px 5px 5px 2px;   /* quadrado na base, 4px na ponta */
  min-width: 3px; transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.etapa .pct { grid-column: 1 / -1; font-size: 12px; color: var(--ink-muted); margin-top: -3px; }

/* --------------------------------------------------------------- gráfico -- */

.gfx { width: 100%; display: block; overflow: visible; }
.gfx .eixo   { stroke: var(--axis); stroke-width: 1; }
.gfx .malha  { stroke: var(--grid); stroke-width: 1; }   /* sólida, nunca tracejada */
.gfx .tick   { fill: var(--ink-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.gfx .col    { fill: var(--s1); }
.gfx .col.apagada { opacity: .38; }
.gfx .alvo   { fill: transparent; cursor: crosshair; }

.dica {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-forte); border-radius: 10px;
  padding: 9px 11px; font-size: 12.5px; box-shadow: var(--sombra);
  transition: opacity .1s; max-width: 260px;
}
.dica.on { opacity: 1; }
.dica b { font-weight: 660; }
.dica .l { color: var(--ink-2); }
.dica .v { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- tabela -- */

.envolve-tabela { overflow-x: auto; margin: 0 -20px -20px; padding: 0 20px 4px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 9px 10px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; white-space: normal; min-width: 220px; }
thead th {
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-muted); border-bottom: 1px solid var(--border-forte);
  position: sticky; top: 0; background: var(--surface); cursor: pointer; user-select: none;
}
thead th:hover { color: var(--ink); }
thead th .ord { opacity: .45; font-size: 9px; margin-left: 3px; }
thead th[aria-sort] .ord { opacity: 1; }
tbody tr { border-bottom: 1px solid var(--grid); }
tbody tr:hover { background: var(--surface-2); }
tbody td { font-variant-numeric: tabular-nums; color: var(--ink-2); }
tbody td:first-child { color: var(--ink); font-weight: 550; }
tbody td.forte { color: var(--ink); font-weight: 600; }
tfoot td { padding-top: 11px; font-weight: 660; color: var(--ink); border-top: 1px solid var(--border-forte); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ avisos ------ */

.avisos { display: grid; gap: 8px; }
.aviso {
  display: flex; align-items: flex-start; gap: 9px; padding: 11px 13px;
  border-radius: var(--r-sm); font-size: 13px; border: 1px solid;
}
.aviso .ico { flex: none; font-size: 14px; line-height: 1.35; }
.aviso.atencao { background: color-mix(in srgb, var(--atencao) 12%, var(--surface));
                 border-color: color-mix(in srgb, var(--atencao) 40%, transparent); }
.aviso.critico { background: color-mix(in srgb, var(--critico) 10%, var(--surface));
                 border-color: color-mix(in srgb, var(--critico) 35%, transparent); }
.aviso.info    { background: var(--surface-2); border-color: var(--border); color: var(--ink-2); }
.aviso a { color: inherit; font-weight: 650; }

/* ------------------------------------------------------------ estados ----- */

/* Refetch segura o desenho anterior em opacidade reduzida — esqueleto piscando
   a cada troca de filtro faz a tela parecer instável. */
.carregando { opacity: .45; transition: opacity .15s; pointer-events: none; }

.vazio { padding: 28px 8px; text-align: center; color: var(--ink-muted); font-size: 13.5px; }

.rodape {
  padding: 0 24px 32px; color: var(--ink-muted); font-size: 12px;
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
}
.pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--bom); flex: none; }
.pulso.ruim { background: var(--critico); }

.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}