/* Aba Dashboard.
   Desenhada inteira por js/features/dashboard/page.js e graficos.js — o painel no index.html nasce
   vazio.

   CORES DE DADOS (paleta de referência do guia de visualização, validada):
     série 1 azul, série 2 laranja, série 3 verde-água — nessa ordem, conferida para daltonismo;
     escala sequencial e ordinal: um azul só, do claro ao escuro;
     estado (bom / atenção / crítico): só em selo e variação, sempre com a palavra ou a seta.
   O verde-água fica abaixo de 3:1 sobre o branco; por isso todo gráfico tem legenda e tabela. */

#tab-dashboard {
    --dash-cor-1: #2a78d6;
    --dash-cor-2: #eb6834;
    --dash-cor-3: #1baf7a;
    --dash-cor-neutra: #9aa3ad;
    --dash-seq-1: #cde2fb;
    --dash-seq-2: #9ec5f4;
    --dash-seq-3: #6da7ec;
    --dash-seq-4: #3987e5;
    --dash-seq-5: #256abf;
    --dash-seq-6: #104281;
    --dash-ord-1: #86b6ef;
    --dash-ord-2: #5598e7;
    --dash-ord-3: #2a78d6;
    --dash-ord-4: #1c5cab;
    --dash-ord-5: #104281;
    --dash-borda: #e5e7eb;
    --dash-grade: #eef0f3;
    --dash-trilho: #f1f3f5;
    --dash-texto-1: #111827;
    --dash-texto-2: #4b5563;
    --dash-texto-3: #8a919c;
    --dash-bom: #15803d;
    --dash-atencao: #b45309;
    --dash-grave: #b91c1c;
}

/* ---------- base ---------- */

/* A fonte do sistema dentro do painel: números em Montserrat pesado pareciam cartaz. */
#tab-dashboard {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--dash-texto-1);
}

.dash-corpo {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

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

.dash-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 24px;
}

.dash-topo-textos { min-width: 0; }

.dash-titulo {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--dash-texto-1);
}

.dash-atualizado {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--dash-texto-3);
}

.dash-atualizado strong { font-weight: 500; color: var(--dash-texto-2); }

.dash-topo-acoes {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Fontes: um ponto e o nome. Só o que não respondeu inteiro ganha palavra ao lado. */
.dash-fontes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    color: var(--dash-texto-2);
}

.dash-fonte {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
}

.dash-fonte-ponto {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dash-bom);
}

.dash-fonte-parcial .dash-fonte-ponto { background: #d97706; }
.dash-fonte-fora .dash-fonte-ponto { background: var(--dash-grave); }
.dash-fonte-estado { color: var(--dash-texto-3); }

.dash-botao-coletar {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: var(--dash-texto-1);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}

.dash-botao-coletar:hover:not(:disabled) { background: #374151; }
.dash-botao-coletar:disabled { background: #9ca3af; cursor: default; }

/* aviso (só quando há problema) */

.dash-estado {
    padding: 10px 14px;
    border: 1px solid var(--dash-borda);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    line-height: 1.5;
    color: var(--dash-texto-2);
}

.dash-estado-aviso { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.dash-estado-alerta { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ---------- abas ---------- */

/* Sublinhadas, fixas no topo ao rolar. Uma linha só, que rola de lado quando não cabe. */
.dash-abas {
    position: sticky;
    /* RENTE AO TOPO. A área de conteúdo (.main-content, main.css) tem 40px de espaçamento interno, e
       uma barra presa em top: 0 ficava 40px abaixo da borda, com o conteúdo rolando visível nessa
       faixa. O recuo negativo, do tamanho desse espaçamento, cola a barra na borda. */
    top: -40px;
    z-index: 20;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    background: var(--bg-light);
    border-bottom: 1px solid var(--dash-borda);
    scrollbar-width: none;
}

.dash-abas::-webkit-scrollbar { display: none; }

.dash-aba {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 0 11px;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: var(--dash-texto-3);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s;
}

.dash-aba:hover { color: var(--dash-texto-1); }

.dash-aba.ativa {
    color: var(--dash-texto-1);
    border-bottom-color: var(--dash-texto-1);
}

/* Quantos números críticos o tema tem. */
.dash-aba-contador {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #fee2e2;
    color: var(--dash-grave);
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.dash-aba:focus-visible,
.dash-captura:focus-visible,
.dash-botao-coletar:focus-visible,
[tabindex="0"]:focus-visible {
    outline: 2px solid var(--dash-cor-1);
    outline-offset: 2px;
}

/* ---------- cabeçalho do tema ---------- */

.dash-secao {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dash-secao-cabecalho { display: block; }

.dash-secao-textos h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--dash-texto-1);
}

.dash-secao-descricao {
    max-width: 72ch;
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--dash-texto-2);
}

.dash-secao-fontes {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--dash-texto-3);
}

/* ---------- números ---------- */

/* Uma faixa só, dividida por linhas finas: os números de um tema se leem juntos. */
.dash-topo-secao {
    overflow: hidden;
    border: 1px solid var(--dash-borda);
    border-radius: 10px;
    background: #fff;
}

.dash-topo-secao.com-heroi {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 3fr;
}

.dash-topo-secao.com-heroi > .dash-heroi { border-right: 1px solid var(--dash-borda); }

/* Cada cartão desenha a linha da direita e a de baixo; a margem negativa esconde as da borda. */
.dash-cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    margin: 0 -1px -1px 0;
}

.dash-cartao {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 18px 20px;
    container-type: inline-size;
    background: #fff;
}

.dash-cartoes > .dash-cartao {
    border-right: 1px solid var(--dash-borda);
    border-bottom: 1px solid var(--dash-borda);
}

.dash-cartao-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.dash-cartao-titulo {
    margin: 0;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--dash-texto-2);
}

.dash-cartao-valor {
    margin-top: 10px;
    font-size: min(26px, 11.5cqi);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--dash-texto-1);
    white-space: nowrap;
}

/* A fonte encolhe com o comprimento do número e com a largura do cartão (cqi = 1% da largura). */
.dash-valor-medio { font-size: min(24px, 10.6cqi); }
.dash-valor-longo { font-size: min(21px, 9.2cqi); }

.dash-cartao-tendencia {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 8px;
}

.dash-cartao-detalhe {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--dash-texto-3);
}

.dash-cartao-nota {
    margin: auto 0 0;
    padding-top: 8px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--dash-texto-3);
}

/* Estado: ponto e palavra, sem fundo. */
.dash-selo {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.dash-selo::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.dash-selo-bom { color: var(--dash-bom); }
.dash-selo-atencao { color: var(--dash-atencao); }
.dash-selo-grave { color: var(--dash-grave); }

/* variação e minigráfico */

.dash-variacao-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 6px;
    font-size: 12.5px;
}

.dash-variacao { font-weight: 500; }
.dash-variacao-boa { color: var(--dash-bom); }
.dash-variacao-ruim { color: var(--dash-grave); }
.dash-variacao-neutra { color: var(--dash-texto-2); }
.dash-variacao-ref { color: var(--dash-texto-3); }

.dash-mini { flex: none; overflow: visible; margin-left: auto; }
.dash-mini-linha { fill: none; stroke: #c3c9d1; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.dash-mini-ponto { fill: var(--dash-texto-1); stroke: #fff; stroke-width: 2; }

/* O número de destaque: o mesmo cartão, com mais espaço e mais tamanho. */
.dash-heroi {
    justify-content: center;
    padding: 24px 24px 22px;
}

.dash-heroi .dash-cartao-titulo { font-size: 13px; color: var(--dash-texto-2); }
.dash-heroi .dash-cartao-valor { margin-top: 12px; font-size: min(40px, 14cqi); letter-spacing: -0.03em; }
.dash-heroi .dash-valor-medio { font-size: min(36px, 12cqi); }
.dash-heroi .dash-valor-longo { font-size: min(32px, 10cqi); }
.dash-heroi .dash-cartao-tendencia { margin-top: 12px; }
.dash-heroi .dash-mini { width: 150px; height: 36px; }
.dash-heroi .dash-mini-linha { stroke: #9aa3ad; }

.dash-sem_dados .dash-cartao-valor,
.dash-indisponivel .dash-cartao-valor {
    font-size: 15px;
    font-weight: 500;
    white-space: normal;
    color: var(--dash-texto-3);
}

/* ---------- indicadores sem número ---------- */

.dash-pendentes {
    border: 1px solid var(--dash-borda);
    border-radius: 10px;
    background: #fff;
}

.dash-pendentes summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 12px 16px;
    font-size: 13px;
    cursor: pointer;
    list-style: none;
}

.dash-pendentes summary::-webkit-details-marker { display: none; }

.dash-pendentes summary::after {
    content: '›';
    margin-left: auto;
    font-size: 16px;
    line-height: 1;
    color: var(--dash-texto-3);
    transition: transform .15s;
}

.dash-pendentes[open] summary::after { transform: rotate(90deg); }
.dash-pendentes-titulo { font-weight: 500; color: var(--dash-texto-1); }
.dash-pendentes-resumo { font-size: 12.5px; color: var(--dash-texto-3); }

.dash-pendentes ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--dash-borda);
}

.dash-pendente {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 2px 16px;
    padding: 12px 16px;
    font-size: 13px;
}

.dash-pendente + .dash-pendente { border-top: 1px solid #f1f3f5; }
.dash-pendente strong { font-weight: 500; color: var(--dash-texto-1); }
.dash-pendente-situacao { grid-row: span 2; font-size: 12px; color: var(--dash-texto-3); }
.dash-sem_dados .dash-pendente-situacao { color: var(--dash-atencao); }
.dash-pendente-motivo { font-size: 12.5px; line-height: 1.5; color: var(--dash-texto-2); }

/* ---------- quadros ---------- */

.dash-quadros {
    display: grid;
    /* Dois por linha em tela larga: três deixam as colunas mensais espremidas. 8px = metade do gap. */
    grid-template-columns: repeat(auto-fill, minmax(max(420px, calc(50% - 8px)), 1fr));
    gap: 16px;
}

.dash-quadro {
    margin: 0;
    padding: 20px;
    min-width: 0;
    border: 1px solid var(--dash-borda);
    border-radius: 10px;
    background: #fff;
}

.dash-quadro-largo { grid-column: 1 / -1; }

.dash-quadro figcaption { margin-bottom: 18px; }

.dash-quadro h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-texto-1);
}

.dash-quadro-subtitulo {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--dash-texto-3);
}

.dash-quadro-nota {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--dash-texto-3);
}

.dash-vazio {
    margin: 0;
    font-size: 13px;
    color: var(--dash-texto-3);
}

/* painel vazio / carregando */

.dash-vazio-painel {
    padding: 64px 20px;
    border: 1px solid var(--dash-borda);
    border-radius: 10px;
    background: #fff;
    text-align: center;
    color: var(--dash-texto-2);
}

.dash-vazio-painel h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--dash-texto-1); }
.dash-vazio-painel p { margin: 0 auto; font-size: 13.5px; max-width: 460px; }

/* cores de marca (fundo e traço) */

.dash-cor-1 { --cor: var(--dash-cor-1); }
.dash-cor-2 { --cor: var(--dash-cor-2); }
.dash-cor-3 { --cor: var(--dash-cor-3); }
.dash-cor-neutra { --cor: var(--dash-cor-neutra); }
.dash-cor-grave { --cor: var(--dash-grave); }
.dash-cor-ord-1 { --cor: var(--dash-ord-1); }
.dash-cor-ord-2 { --cor: var(--dash-ord-2); }
.dash-cor-ord-3 { --cor: var(--dash-ord-3); }
.dash-cor-ord-4 { --cor: var(--dash-ord-4); }
.dash-cor-ord-5 { --cor: var(--dash-ord-5); }

/* legenda */

.dash-legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--dash-texto-2);
}

.dash-legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.dash-legenda-caixa { width: 10px; height: 10px; border-radius: 2px; background: var(--cor); }
.dash-legenda-traco { width: 16px; height: 2px; border-radius: 1px; background: var(--cor); }
.dash-legenda-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--cor); }

/* barras horizontais */

.dash-barras { display: flex; flex-direction: column; gap: 4px; }

.dash-barra,
.dash-empilhada {
    display: grid;
    grid-template-columns: minmax(90px, 36%) 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: 12.5px;
}

.dash-barra:hover,
.dash-empilhada:hover,
.dash-funil-etapa:hover,
.dash-medidor:hover { background: #f5f7fa; }

.dash-barra-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dash-barra-trilho {
    height: 12px;
    background: var(--dash-trilho);
    border-radius: 0 4px 4px 0;
    overflow: hidden;
}

.dash-barra-preenchimento {
    height: 100%;
    background: var(--cor, var(--dash-cor-1));
    border-radius: 0 4px 4px 0;
}

.dash-barra-valor {
    font-variant-numeric: tabular-nums;
    color: var(--dash-texto-2);
    white-space: nowrap;
}

/* colunas */

.dash-colunas-area {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px;
}

.dash-colunas-grade {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 170px;
    font-size: 10.5px;
    color: var(--dash-texto-3);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dash-colunas-grade span { transform: translateY(-50%); }
.dash-colunas-grade span:last-child { transform: translateY(0); }

.dash-colunas {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 170px;
    border-bottom: 1px solid #c9cdd3;
    background:
        linear-gradient(var(--dash-grade), var(--dash-grade)) 0 0 / 100% 1px no-repeat,
        linear-gradient(var(--dash-grade), var(--dash-grade)) 0 50% / 100% 1px no-repeat;
}

.dash-coluna-grupo {
    flex: 1 1 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 100%;
    min-width: 0;
    border-radius: 3px;
}

.dash-coluna-grupo:hover { background: #f2f5f9; }

.dash-coluna {
    flex: 0 1 24px;
    height: 100%;
    display: flex;
    align-items: flex-end;
    min-width: 0;
}

.dash-coluna-preenchimento {
    width: 100%;
    background: var(--cor);
    border-radius: 4px 4px 0 0;
}

.dash-colunas-eixo {
    display: flex;
    gap: 2px;
    margin-top: 5px;
}

.dash-colunas-eixo.com-grade { padding-left: 42px; }

.dash-colunas-eixo span {
    flex: 1 1 0;
    min-width: 0;
    font-size: 10.5px;
    color: var(--dash-texto-3);
    text-align: center;
    white-space: nowrap;
}

/* colunas divergentes */

.dash-divergente {
    display: flex;
    gap: 2px;
    height: 200px;
}

.dash-div-coluna {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 3px;
}

.dash-div-coluna:hover { background: #f2f5f9; }

.dash-div-metade {
    flex: 1 1 0;
    display: flex;
    justify-content: center;
}

.dash-div-cima { align-items: flex-end; border-bottom: 1px solid #c9cdd3; }
.dash-div-baixo { align-items: flex-start; }

.dash-div-marca {
    width: min(24px, 70%);
    background: var(--cor);
}

.dash-div-cima .dash-div-marca { border-radius: 4px 4px 0 0; }
.dash-div-baixo .dash-div-marca { border-radius: 0 0 4px 4px; margin-top: 1px; }

/* linha e dispersão (SVG) */

.dash-linha-area { width: 100%; min-height: 40px; }
.dash-linha-area svg { display: block; overflow: visible; }

.dash-eixo-grade { stroke: var(--dash-grade); stroke-width: 1; }
.dash-eixo-referencia { stroke: #b5bcc5; stroke-width: 1; }
.dash-eixo-texto { fill: var(--dash-texto-3); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.dash-eixo-titulo { fill: var(--dash-texto-2); font-size: 11px; }
.dash-eixo-valor { fill: var(--dash-texto-1); font-size: 11.5px; font-weight: 600; }
.dash-quadrante { fill: var(--dash-texto-3); font-size: 10.5px; font-style: italic; }

.dash-linha-traco { fill: none; stroke: var(--cor); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.dash-linha-lavagem { fill: var(--cor); opacity: 0.1; }
.dash-linha-ponto { fill: var(--cor); stroke: #fff; stroke-width: 2; }
.dash-cursor { stroke: #9aa3ad; stroke-width: 1; }
.dash-captura { fill: transparent; cursor: crosshair; }
.dash-ponto { fill: var(--cor); stroke: #fff; stroke-width: 2; }
.dash-alvo { fill: transparent; cursor: pointer; }

/* cascata */

.dash-cascata {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.dash-cascata-coluna {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 4px;
}

.dash-cascata-coluna:hover { background: #f2f5f9; }

.dash-cascata-trilho {
    position: relative;
    height: 190px;
    margin-top: 20px;
    border-bottom: 1px solid #c9cdd3;
}

.dash-cascata-marca {
    position: absolute;
    left: 50%;
    width: min(56px, 70%);
    transform: translateX(-50%);
    background: var(--cor);
    border-radius: 4px;
}

.dash-cascata-valor {
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-4px);
    margin-bottom: 2px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--dash-texto-1);
    white-space: nowrap;
}

.dash-cascata-rotulo {
    margin-top: 6px;
    text-align: center;
    font-size: 11.5px;
    color: var(--dash-texto-2);
    line-height: 1.3;
}

/* empilhadas */

.dash-empilhadas { display: flex; flex-direction: column; gap: 4px; }

.dash-empilhada-trilho {
    display: flex;
    gap: 2px;
    height: 14px;
    background: var(--dash-trilho);
    border-radius: 4px;
    overflow: hidden;
}

.dash-empilhada-parte { height: 100%; background: var(--cor); }

/* mapa de calor */

/* Três semanas de colunas não cabem num celular: a grade rola sozinha, a página não. */
.dash-calor-rolagem {
    overflow-x: auto;
}

.dash-calor {
    min-width: max-content;
    display: grid;
    justify-content: start;
    gap: 2px;
    align-items: center;
}

.dash-calor-eixo {
    font-size: 10.5px;
    color: var(--dash-texto-3);
    text-align: center;
    white-space: nowrap;
}

.dash-calor-eixo-linha { text-align: right; padding-right: 4px; }

.dash-calor-celula {
    display: block;
    height: 22px;
    border-radius: 3px;
    background: #f1f3f6;
}

/* Sem dado naquela célula (cliente sem boleto no mês): hachurado, para não se confundir com zero. */
.dash-calor-celula.dash-calor-vazio {
    background: repeating-linear-gradient(135deg, #fff 0 3px, #eceff3 3px 6px);
}

.dash-calor-celula:hover { outline: 2px solid var(--dash-texto-1); outline-offset: -1px; }

.dash-calor-1 { background: var(--dash-seq-1); }
.dash-calor-2 { background: var(--dash-seq-2); }
.dash-calor-3 { background: var(--dash-seq-3); }
.dash-calor-4 { background: var(--dash-seq-4); }
.dash-calor-5 { background: var(--dash-seq-5); }
.dash-calor-6 { background: var(--dash-seq-6); }

.dash-calor-escala {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    font-size: 10.5px;
    color: var(--dash-texto-3);
}

.dash-calor-escala .dash-calor-celula { width: 22px; height: 10px; }
.dash-calor-escala span:first-child { margin-right: 4px; }
.dash-calor-escala span:last-child { margin-left: 4px; }

/* funil */

.dash-funil { display: flex; flex-direction: column; gap: 8px; }

.dash-funil-etapa {
    display: grid;
    grid-template-columns: minmax(120px, 34%) 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: 12.5px;
}

.dash-funil-rotulo { display: flex; flex-direction: column; }
.dash-funil-passagem { font-size: 10.5px; color: var(--dash-texto-3); }

.dash-funil-trilho {
    height: 22px;
    display: flex;
    justify-content: center;
    background: var(--dash-trilho);
    border-radius: 4px;
}

.dash-funil-marca { height: 100%; border-radius: 4px; }
.dash-ordinal-1 { background: var(--dash-ord-1); }
.dash-ordinal-2 { background: var(--dash-ord-2); }
.dash-ordinal-3 { background: var(--dash-ord-3); }
.dash-ordinal-4 { background: var(--dash-ord-4); }
.dash-ordinal-5 { background: var(--dash-ord-5); }

/* medidores */

.dash-medidores { display: flex; flex-direction: column; gap: 10px; }

.dash-medidor { padding: 4px; border-radius: 4px; }

.dash-medidor-topo {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12.5px;
}

.dash-medidor-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-medidor-valor { font-weight: 700; font-variant-numeric: tabular-nums; }

.dash-medidor-trilho {
    position: relative;
    height: 10px;
    margin: 5px 0 4px;
    border-radius: 5px;
    background: var(--dash-seq-1);
}

.dash-medidor-marca {
    height: 100%;
    border-radius: 5px;
    background: var(--dash-cor-1);
}

.dash-medidor-atencao .dash-medidor-marca { background: #e0901a; }
.dash-medidor-grave .dash-medidor-marca { background: var(--dash-grave); }
.dash-medidor-atencao { background: #fbe9cf; }
.dash-medidor-grave { background: #f8d9d7; }

.dash-medidor-meta {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 2px;
    margin-left: -1px;
    background: var(--dash-texto-1);
}

.dash-medidor-rodape {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--dash-texto-3);
}

/* tabela */

.dash-tabela-rolagem {
    overflow-x: auto;
    max-height: 460px;
    overflow-y: auto;
}

.dash-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.dash-tabela th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    text-align: left;
    font-weight: 600;
    color: var(--dash-texto-2);
    padding: 6px 8px;
    border-bottom: 1px solid var(--dash-borda);
    white-space: nowrap;
}

.dash-tabela td {
    padding: 6px 8px;
    border-bottom: 1px solid #f0f2f5;
    vertical-align: top;
}

.dash-tabela tbody tr:hover { background: #f7f9fb; }

.dash-tabela .dash-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dash-td-barra { position: relative; min-width: 110px; }

.dash-td-barra-fundo {
    position: absolute;
    right: 8px;
    top: 5px;
    bottom: 5px;
    max-width: calc(100% - 16px);
    background: var(--cor);
    opacity: 0.18;
    border-radius: 3px;
}

.dash-td-barra-texto { position: relative; }

.dash-dados {
    margin-top: 10px;
    font-size: 12.5px;
}

.dash-dados summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--dash-texto-3);
}

.dash-dados summary:hover { color: var(--dash-texto-1); }

.dash-rodape {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* balão */

.dash-balao {
    position: fixed;
    z-index: 3000;
    max-width: 280px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--dash-borda);
    box-shadow: 0 6px 20px rgba(11, 27, 43, 0.14);
    font-size: 12px;
    color: var(--dash-texto-2);
    pointer-events: none;
}

.dash-balao-titulo {
    margin-bottom: 4px;
    font-weight: 600;
    color: var(--dash-texto-1);
}

.dash-balao-linha {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.5;
}

.dash-balao-linha strong {
    color: var(--dash-texto-1);
    font-variant-numeric: tabular-nums;
}

.dash-balao-traco {
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background: var(--cor);
}

@media (max-width: 1100px) {
    .dash-topo-secao.com-heroi { grid-template-columns: 1fr; }
    .dash-topo-secao.com-heroi > .dash-heroi { border-right: 0; border-bottom: 1px solid var(--dash-borda); }
}

@media (max-width: 760px) {
    .dash-fontes { margin-left: 0; }
    .dash-pendente { grid-template-columns: 1fr; }
    .dash-pendente-situacao { grid-row: auto; }
}

/* Até 768px o espaçamento interno da área de conteúdo cai para 20px (main.css, mesmo ponto de corte). */
@media (max-width: 768px) {
    .dash-abas { top: -20px; }
}

@media (max-width: 640px) {
    .dash-titulo { font-size: 21px; }
    .dash-abas { gap: 18px; }
    .dash-cartoes { grid-template-columns: 1fr 1fr; }
    .dash-cartao { padding: 14px; }
    .dash-cartoes .dash-mini { display: none; }
    .dash-quadros { grid-template-columns: 1fr; }
    .dash-quadro { padding: 16px; }
    .dash-barra, .dash-empilhada, .dash-funil-etapa { grid-template-columns: minmax(70px, 35%) 1fr; }
    .dash-barra-valor { grid-column: 2; }
    .dash-cascata { gap: 4px; }
    .dash-cascata-valor { font-size: 10.5px; }
    /* Doze rótulos de mês não cabem em 360px: fica um sim, um não. O valor de cada coluna
       continua no tooltip e em "Ver os números". */
    .dash-colunas-eixo span:nth-child(even) { visibility: hidden; }
}

@media (max-width: 420px) {
    .dash-cartoes { grid-template-columns: 1fr; }
}