/* Paleta do SuasVendas: o portal é uma extensão do produto, e chegar nele por um
   redirect do account com outra cor de marca se lê como outro sistema.

   Os três azuis saem da interface do SV: o escuro é o da barra superior e do menu, o
   médio é o de item ativo e de botão de ação, o claro é o das faixas de seção.

   Verde e vermelho continuam, mas só como SEMÂNTICA de variação (positivo / negativo).
   Enquanto o verde era também a marca, um crescimento verde se confundia com "a cor do
   sistema" — separar os dois papéis é o ganho de legibilidade desta troca. */
:root {
    --primaria: #282FBC;        /* marca: cabeçalho de tabela, títulos, aba ativa */
    --primaria-clara: #2F65CC;  /* ação: botões, barras do período atual */
    --primaria-escura: #1E2391; /* hover e foco da primária */
    --primaria-fundo: #E1EFFF;  /* faixas e superfícies de apoio */
    --cinza-barra: #BDBDBD;     /* barras do período comparativo */
    --laranja: #E65100;         /* linha de crescimento e destaque negativo */
    --fundo: #FAFAFA;
    --cartao: #FFFFFF;
    --texto: #212121;
    --texto-fraco: #616161;
    --borda: #E0E0E0;
    --zebra: #F5F5F5;
    --positivo-fundo: #E8F5E9;
    --positivo-texto: #1B5E20;
    --negativo-fundo: #FFEBEE;
    --negativo-texto: #B71C1C;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fundo);
    color: var(--texto);
    font-size: 14px;
}

.portal { display: flex; flex-direction: column; min-height: 100vh; }

/* Header fixo, 60px (§8.1) */
.cabecalho {
    /* min-height, nunca height: os filtros globais têm flex-wrap e quebram para uma
       segunda linha em qualquer largura em que não couberem. Com altura fixa, o
       conteúdo mais alto que a caixa era centralizado e vazava para os dois lados —
       cortado no topo da janela e por cima do banner e dos KPIs logo abaixo. */
    min-height: 60px;
    flex-wrap: wrap;
    background: var(--cartao);
    border-bottom: 1px solid var(--borda);
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Padding vertical real: com as linhas quebrando, zero encostava os controles
       na borda da barra. */
    padding: .5rem 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
/* A logo e o nome do produto lado a lado: a logo é da SuasVendas, "SV BI" é o produto.
   gap pequeno e baseline alinhada para lerem como uma assinatura só. */
.cabecalho .marca {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    color: var(--primaria);
    white-space: nowrap;
}

/* Altura fixa e largura automática: o SVG é um wordmark 523x77, e deixar a largura
   livre evita distorcê-lo em qualquer altura de cabeçalho. */
.logo-sv { height: 18px; width: auto; display: block; }
/* Duas linhas, sempre: identidade e usuário em cima, filtros na largura inteira embaixo.
   Isto valia só abaixo de 1280px. Acima, os três blocos dividiam a mesma linha e os nove
   filtros ficavam espremidos numa coluna do meio — quebravam em três fileiras curtas, com
   a direita da primeira e da terceira vazias. Com a largura toda, os mesmos nove cabem em
   uma fileira num monitor comum, e o cabeçalho encolhe em vez de crescer. */
.cabecalho { align-items: flex-start; }
.cabecalho .marca { order: 1; align-self: center; }
.cabecalho .usuario { order: 2; margin-left: auto; align-self: center; }

/* flex: 0 0 100% num atalho só. Separar em `flex-basis: 100%` e `flex: none` não
   funciona: o atalho vem depois e redefine o basis para auto, e a linha de filtros volta
   a dimensionar pelo conteúdo e transbordar a tela. */
.cabecalho .filtros {
    order: 3;
    flex: 0 0 100%;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}
/* flex-wrap: o carimbo de atualização por extenso ("Atualização 01/09/2026 13:00:40")
   levou este bloco a 415px, e a tela do celular tem 390 — a página inteira passou a
   rolar para o lado. Quebrando a linha, ele se acomoda em qualquer largura. */
.cabecalho .usuario {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    min-width: 0;
    color: var(--texto-fraco);
    font-size: .8rem;
}

/* Faixa de KPIs */
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; padding: .75rem 1rem; }
.kpi {
    background: var(--cartao);
    border-radius: 8px;
    padding: .75rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kpi .rotulo { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); }
.kpi .valor { font-size: 1.35rem; font-weight: 600; margin-top: .15rem; }
.kpi .nota { font-size: .7rem; color: var(--texto-fraco); margin-top: .1rem; }

/* Barra de toggles */
.toggles { display: flex; justify-content: space-between; align-items: center; padding: 0 1rem .5rem; gap: 1rem; flex-wrap: wrap; }

.area-grafico {
    background: var(--cartao);
    margin: 0 1rem;
    border-radius: 8px;
    padding: .75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    min-height: 350px;
}

.conteudo { display: flex; gap: 1rem; padding: 1rem; align-items: flex-start; }

/* Sidebar de dimensões, 160px (§8.1) */
.dimensoes { width: 160px; flex-shrink: 0; display: flex; flex-direction: column; gap: .25rem; }
.dimensoes button {
    text-align: left;
    padding: .5rem .6rem;
    border: 1px solid var(--borda);
    background: var(--cartao);
    border-radius: 6px;
    cursor: pointer;
    font-size: .8rem;
    color: var(--texto);
}
.dimensoes button:hover { border-color: var(--primaria-clara); }
.dimensoes button.ativo { background: var(--primaria); color: #fff; border-color: var(--primaria); font-weight: 600; }

/* overflow-x: auto, não hidden: a tabela tem mais colunas do que cabe em tela
   estreita, e recortá-las em silêncio esconde dados que o usuário não sabe que
   existem. Rolando dentro do próprio quadro, ele alcança o resto sem que a página
   inteira deslize para o lado. */
.area-tabela {
    flex: 1;
    min-width: 0;
    background: var(--cartao);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    overflow-x: auto;
    overflow-y: hidden;
}

.aviso-dados {
    font-size: .75rem;
    color: var(--texto-fraco);
    padding: .5rem .75rem;
    border-top: 1px solid var(--borda);
}

.badge { padding: .1rem .4rem; border-radius: 4px; font-size: .75rem; font-weight: 600; }
.badge.pos { background: var(--positivo-fundo); color: var(--positivo-texto); }
.badge.neg { background: var(--negativo-fundo); color: var(--negativo-texto); }

.banner {
    background: #FFF8E1;
    border-bottom: 1px solid #FFE082;
    color: #6D4C41;
    padding: .5rem 1rem;
    font-size: .8rem;
}

/* Nota de sincronização de rotina, ao lado do carimbo de atualização. Discreta de
   propósito: é informação de contexto, não alerta — o dashboard continua correto. */
.atualizando {
    color: var(--primaria-clara);
    font-size: .75rem;
    font-style: italic;
    white-space: nowrap;
}

/* Limite de histórico e bloqueio de exportação: informação de contexto, não alarme.
   Fundo de apoio e texto discreto — o dashboard está correto, só é menor do que
   poderia ser, e quem precisa de mais sabe a quem pedir. */
.nota-limite {
    background: var(--primaria-fundo);
    border-bottom: 1px solid var(--borda);
    color: var(--primaria);
    padding: .4rem 1rem;
    font-size: .78rem;
}

.exportar-bloqueado { opacity: .5; cursor: not-allowed; }

.nota-bloqueio { color: var(--texto-fraco); font-size: .75rem; }

.vazio { padding: 3rem 1rem; text-align: center; color: var(--texto-fraco); }

/* Responsividade (§8.2) */
@media (max-width: 1280px) {
    .kpis { grid-template-columns: repeat(3, 1fr); }

    /* O cabeçalho em duas linhas já é o padrão (ver acima); aqui sobra o conteúdo.

       align-items: stretch é obrigatório junto do flex-direction: column. Herdando
       o flex-start do layout em duas colunas, os filhos passam a ter a largura do
       conteúdo — a `.area-tabela` ia a 1232px dentro de uma tela de 390px e arrastava
       a página inteira para o lado. `flex: 1` não segura isso: no modo coluna ele
       governa a altura, não a largura. */
    .conteudo { flex-direction: column; align-items: stretch; }
    .dimensoes { width: 100%; flex-direction: row; overflow-x: auto; }
}
@media (max-width: 768px) {
    .kpis { grid-template-columns: 1fr; }

    /* Sem rótulos de valor sobre as barras no celular. Com as duas séries rotuladas
       (§3.4) e a largura de um telefone, eles se empilham uns sobre os outros e sobre
       o eixo — viram ruído em cima de um gráfico que já está apertado. O número exato
       continua no card ao tocar e na tabela logo abaixo. */
    .rz-series-data-label-group { display: none; }

    /* O raleamento por quantidade é emitido pelo próprio GraficoComparativo, que sabe
       quantos períodos há. Aqui fica só o caso em que ele não entra: poucos períodos,
       que no celular ainda assim não cabem todos. */
    .rz-category-axis .rz-tick:nth-of-type(even) .rz-tick-text { display: none; }

    /* No celular o cabeçalho rola junto com a página. Grudado, os seis filtros
       empilhados ocupavam 276px de uma tela de 844 — um terço reservado para
       controles, permanentemente, num aparelho onde espaço vertical é o recurso
       escasso. Para filtrar, o usuário rola de volta ao topo. */
    .cabecalho { position: static; }
}

.contagem-filtros {
    font-size: .75rem;
    color: var(--primaria);
    font-weight: 600;
    white-space: nowrap;
}

/* Markup apurado sobre base fraca: o número perde peso em vez de ganhar um segundo
   número ao lado. Cinza, não vermelho — não é erro, é medida com menos apoio. */
.markup-fraco { color: var(--texto-fraco); }

.marca-fraco {
    color: var(--laranja);
    font-weight: 600;
    margin-left: .15rem;
}

.faixa-crescimento {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .5rem .25rem 0;
    border-top: 1px solid var(--borda);
    margin-top: .5rem;

    /* Altura limitada, com rolagem própria.

       Com o gráfico mostrando tudo o que os filtros deixam passar, esta faixa pode ter
       mais de cem badges — onze anos de meses. Sem teto, ela empurrava o restante da
       página para muito abaixo e a tabela ficava a três rolagens de distância. Presa a
       esta altura, o crescimento continua todo acessível sem custar a leitura do
       resto. */
    max-height: 9rem;
    overflow-y: auto;
}
/* Dois níveis: períodos em cima, trimestre/ano embaixo — o eixo hierárquico que o
   componente de gráfico não oferece. */
.grupo-periodo { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 auto; }
.grupo-periodo .itens { display: flex; gap: .35rem; justify-content: center; }
.grupo-periodo .rotulo-grupo {
    text-align: center;
    font-size: .66rem;
    color: var(--texto-fraco);
    border-top: 1px solid var(--borda);
    padding-top: .15rem;
    letter-spacing: .02em;
}
.crescimento-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    flex: 1 1 auto;
    min-width: 68px;
}
.crescimento-item .periodo { font-size: .68rem; color: var(--texto-fraco); }

.breadcrumb {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    /* Alinhado com os cards de KPI, não com a tabela: o recorte vale para a tela toda. */
    margin: .75rem 1rem 0;
    padding: .45rem .6rem;
    background: var(--positivo-fundo);
    border-left: 3px solid var(--primaria);
    border-radius: 4px;
    font-size: .8rem;
}
.breadcrumb .crumb {
    background: none;
    border: 0;
    padding: .15rem .35rem;
    border-radius: 4px;
    color: var(--primaria);
    cursor: pointer;
    font-size: .8rem;
}
.breadcrumb .crumb:hover { background: var(--zebra); text-decoration: underline; }
.breadcrumb .crumb.atual { color: var(--texto); font-weight: 600; cursor: default; }
.breadcrumb .separador { color: var(--texto-fraco); }

.rz-datatable tbody tr.navegavel { cursor: pointer; }

/* ---- Indicador de conexão no cabeçalho (§8.1) ----
   O Blazor não expõe o estado da conexão ao componente; o que ele faz é alternar
   classes no #components-reconnect-modal. O ponto do cabeçalho reage a esse mesmo
   estado por seletor irmão, sem precisar de JavaScript próprio. */
.conexao { display: inline-flex; align-items: center; gap: .3rem; }
.conexao .ponto {
    width: 8px; height: 8px; border-radius: 50%;
    background: #43A047;                 /* verde: online */
    box-shadow: 0 0 0 2px rgba(67,160,71,.18);
}
.conexao .texto-conexao { font-size: .72rem; color: var(--texto-fraco); }

body:has(#components-reconnect-modal.components-reconnect-show) .conexao .ponto {
    background: #F9A825;                 /* amarelo: reconectando */
    box-shadow: 0 0 0 2px rgba(249,168,37,.2);
}
body:has(#components-reconnect-modal.components-reconnect-show) .conexao .texto-conexao::after {
    content: "reconectando";
}
body:has(#components-reconnect-modal.components-reconnect-show) .conexao .texto-conexao { font-size: 0; }
body:has(#components-reconnect-modal.components-reconnect-show) .conexao .texto-conexao::after { font-size: .72rem; }

body:has(#components-reconnect-modal.components-reconnect-failed) .conexao .ponto,
body:has(#components-reconnect-modal.components-reconnect-rejected) .conexao .ponto {
    background: #E53935;                 /* vermelho: sem conexão */
    box-shadow: 0 0 0 2px rgba(229,57,53,.2);
}

/* ---- Aviso de reconexão ---- */
.reconexao { display: none; }
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    position: fixed; inset: 0; z-index: 100;
    align-items: flex-start; justify-content: center;
    background: rgba(0,0,0,.25);
    padding-top: 4rem;
}
.reconexao-caixa {
    background: var(--cartao);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    font-size: .9rem;
}
.reconexao-caixa span { display: none; }
.reconexao-caixa button {
    margin-left: .6rem; background: var(--primaria); color: #fff;
    border: 0; padding: .35rem .8rem; border-radius: 4px; cursor: pointer;
}
#components-reconnect-modal.components-reconnect-show .reconectando { display: inline; }
#components-reconnect-modal.components-reconnect-failed .falhou { display: inline; }
#components-reconnect-modal.components-reconnect-rejected .rejeitado { display: inline; }

/* ---- Timestamp e banner de erro ---- */
.atualizacao { font-size: .72rem; color: var(--texto-fraco); white-space: nowrap; }
.banner.erro { background: #FFEBEE; border-bottom-color: #EF9A9A; color: #B71C1C; }

/* Cabeçalho do painel do gráfico: título à esquerda, granularidade à direita (§8.1) */
.cabecalho-grafico {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .25rem .25rem .5rem;
    flex-wrap: wrap;
}

.titulo-grafico { font-size: .85rem; font-weight: 600; color: var(--texto); }

/* Cabeçalho da tabela: fundo verde primário e texto branco (§8.3). O tema do Radzen
   entrega um cabeçalho claro; sem esta regra a tabela não tem a marca do produto e
   perde a separação visual entre título e dado. */
.area-tabela .rz-datatable-thead th,
.area-tabela .rz-grid-table thead th {
    background: var(--primaria) !important;
    color: #FFF !important;
    border-color: var(--primaria) !important;
}

.area-tabela .rz-datatable-thead th .rz-column-title,
.area-tabela .rz-grid-table thead th .rz-column-title,
.area-tabela .rz-grid-table thead th .rz-sortable-column-icon,
.area-tabela .rz-grid-table thead th i { color: #FFF !important; }

/* Linha de total fixa no rodapé (§3.5): rolar a tabela não pode levar o total embora —
   é o número contra o qual o usuário confere todos os outros. */
.area-tabela .rz-datatable-tfoot td,
.area-tabela .rz-grid-table tfoot td {
    position: sticky;
    bottom: 0;
    background: var(--zebra);
    border-top: 2px solid var(--primaria);
    z-index: 2;
}

/* ---------- Card do período (hover no gráfico) ---------- */

/* O card precisa ficar acima de tudo à volta.
   Dois defeitos, medidos com o cursor no pé de uma barra:

   1. Todos os contêineres do gráfico ficam em `z-index: auto`. A legenda vem depois
      no DOM e, sem z-index no tooltip, pintava por cima do rodapé do card.
   2. `.rz-chart-split-tooltip` tem `overflow: hidden` e termina antes do card: quando
      o cursor está perto da linha do zero — que é onde ele fica quando a barra é
      pequena — o card nasce para baixo e os últimos pixels eram recortados.

   30 fica acima do cabeçalho grudado (20): se o card chegar até lá, ele ainda manda. */
.rz-chart-tooltip { z-index: 30; }

.rz-chart-split-tooltip,
.rz-chart-category-tooltip { overflow: visible !important; }

/* O Radzen pinta a borda do tooltip com a cor da série na paleta dele — roxo, que
   nada tem a ver com o verde do portal nem com as cores das barras. Com tooltip
   compartilhado o card fala das duas séries, então cor de série ali não significa
   nada. O !important é porque o valor vem da folha do pacote, não de um estilo nosso. */
.rz-chart-tooltip-content {
    border-color: var(--borda) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.card-periodo { font-size: .76rem; line-height: 1.45; white-space: nowrap; }

.card-periodo header {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin-bottom: .4rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid var(--borda);
}

.card-periodo .comparado { color: var(--texto-fraco); font-size: .7rem; }

.card-periodo table { border-collapse: collapse; }

.card-periodo th,
.card-periodo td { padding: .12rem .45rem; text-align: right; }

.card-periodo thead th {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--texto-fraco);
    font-weight: 500;
}

/* Rótulo da métrica à esquerda; os números alinhados à direita para comparar
   coluna a coluna sem ler cada um. */
.card-periodo tbody th { text-align: left; font-weight: 500; color: var(--texto-fraco); }
.card-periodo tbody td { font-variant-numeric: tabular-nums; }
.card-periodo tbody td:first-of-type { font-weight: 600; }

/* A variação absoluta acompanha o percentual, uma linha abaixo e menor: é contexto
   do percentual, não um quarto número concorrendo com ele. */
.card-periodo .absoluto {
    display: block;
    font-size: .66rem;
    color: var(--texto-fraco);
}

.card-periodo .sem-base { color: var(--texto-fraco); font-style: italic; }

.card-periodo footer {
    margin-top: .4rem;
    padding-top: .3rem;
    border-top: 1px solid var(--borda);
    font-size: .68rem;
    color: var(--texto-fraco);
    white-space: normal;
    max-width: 17rem;
}

/* Destaque condicional (§3.5) */
.negativo { color: var(--negativo-texto); font-weight: 600; }

/* Shimmer dos cards durante o carregamento (§6.4) */
.shimmer {
    border-radius: 4px;
    background: linear-gradient(90deg, #EEE 25%, #F7F7F7 50%, #EEE 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s ease-in-out infinite;
    min-height: 1.35rem;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .shimmer { animation: none; background: #EEE; }
}

/* Barra de progresso no topo (§6.4) */
.progresso { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50; pointer-events: none; }
.progresso.ativa::after {
    content: ""; position: absolute; inset: 0 auto 0 0;
    width: 40%; background: var(--primaria-clara);
    animation: progresso 1.1s ease-in-out infinite;
}
@keyframes progresso {
    0%   { left: -40%; }
    100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .progresso.ativa::after { animation: none; width: 100%; left: 0; opacity: .5; }
}

.logo-conta { max-height: 34px; max-width: 160px; object-fit: contain; display: block; }
.avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--primaria); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 600; letter-spacing: .02em;
}

/* ---------- Página de entrada (usuário anônimo) ---------- */

.entrada {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.5rem;
}

.entrada-cartao {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 2.5rem 2rem;
    max-width: 26rem;
    width: 100%;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* O <FocusOnNavigate Selector="h1"> foca o título a cada navegação, para o leitor
   de tela anunciar onde chegou. O efeito colateral é o navegador desenhar o anel de
   foco num texto que ninguém pode clicar — na tela de entrada o título aparecia
   dentro de uma caixa azul, como se fosse um campo.

   :not(:focus-visible) não resolve: o Chrome faz :focus-visible casar também no foco
   programático. A mira certa é o tabindex="-1" que o próprio FocusOnNavigate coloca —
   um elemento assim não é alcançável por Tab, então nenhum usuário de teclado chega
   nele navegando e o anel não tem a quem servir. */
[tabindex="-1"]:focus { outline: none; }

.entrada-cartao h1 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--primaria);
}

.entrada-sub {
    margin: .5rem 0 2rem;
    color: var(--texto-fraco);
    font-size: .9rem;
}

.entrada-botao {
    display: block;
    background: var(--primaria);
    color: #fff;
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    padding: .8rem 1.25rem;
    border-radius: 6px;
    transition: background .15s;
}

.entrada-botao:hover,
.entrada-botao:focus-visible { background: var(--primaria-escura); }

/* O foco precisa ser visível: o link é o único controle da página, e quem navega
   por teclado não tem outro ponto de referência. */
.entrada-botao:focus-visible { outline: 2px solid var(--laranja); outline-offset: 2px; }

.entrada-nota {
    margin: 1.25rem 0 0;
    font-size: .78rem;
    color: var(--texto-fraco);
    line-height: 1.5;
}

.entrada-rodape {
    font-size: .75rem;
    color: var(--texto-fraco);
}

/* ---------- Painel de progresso da primeira carga ---------- */

.carga-inicial {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-left: 4px solid var(--primaria);
    border-radius: 6px;
    margin: .75rem 1rem 0;
    padding: .85rem 1rem;
}

.carga-topo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.carga-topo strong { color: var(--primaria); font-size: .9rem; }
.carga-contagem { font-size: .78rem; color: var(--texto-fraco); }

.carga-barra {
    height: 5px;
    background: var(--zebra);
    border-radius: 3px;
    overflow: hidden;
    margin: .55rem 0 .7rem;
}

.carga-preenchido {
    height: 100%;
    background: var(--primaria-clara);
    transition: width .4s ease;
}

/* Grade em vez de lista corrida: as etapas são nove, e empilhadas empurrariam os KPIs
   para fora da tela justamente quando o usuário quer ver os números aparecendo. */
.carga-etapas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .2rem .9rem;
}

.carga-etapas li {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    font-size: .76rem;
    color: var(--texto-fraco);
}

.carga-etapas .marca { width: .8rem; text-align: center; font-weight: 700; }
.carga-etapas .nome { min-width: 8.5rem; }
.carga-etapas .detalhe { font-variant-numeric: tabular-nums; }

.carga-etapas .concluida { color: var(--texto); }
.carga-etapas .concluida .marca { color: var(--primaria); }

/* A etapa corrente é a única informação que muda: precisa ser achável de relance. */
.carga-etapas .corrente { color: var(--primaria); font-weight: 600; }

/* Concluída sem conteúdo: o ✓ continua verde porque a etapa DEU CERTO, mas o texto fica
   apagado para não competir com as que trouxeram dados. Laranja aqui seria mentira — não
   há nada de errado numa conta que não tem redes de cliente cadastradas. */
.carga-etapas .vazia .detalhe { color: var(--texto-fraco, #6b7280); font-style: italic; }

.carga-etapas .parcial,
.carga-etapas .interrompida { color: var(--laranja); }
.carga-etapas .pendente { opacity: .55; }

/* A contagem de falhas ao lado do total: sem ela, "7 de 9" parece só andamento, e
   as duas que faltam parecem estar por vir. */
.carga-falhas { color: var(--laranja); }

.carga-nota {
    margin: .7rem 0 0;
    font-size: .7rem;
    color: var(--texto-fraco);
}

/* ---------- Tela intermediária do primeiro acesso ---------- */

.preparando {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.preparando-cartao {
    background: var(--cartao);
    border: 1px solid var(--borda);
    border-radius: 10px;
    padding: 2rem;
    width: 100%;
    max-width: 46rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.preparando-cartao h1 { margin: 0; font-size: 1.35rem; color: var(--primaria); }

.preparando-sub {
    margin: .5rem 0 1.5rem;
    color: var(--texto-fraco);
    font-size: .88rem;
    line-height: 1.5;
}

/* O painel de progresso aqui não é um aviso dentro de uma tela cheia: é o conteúdo.
   Sem a margem e a borda lateral que ele usa no dashboard. */
.preparando .carga-inicial {
    margin: 0;
    border-left-width: 1px;
}

.preparando-espera { color: var(--texto-fraco); font-size: .85rem; }

.preparando-erro p { font-size: .88rem; line-height: 1.5; margin: 0 0 1rem; }

.preparando-botao {
    display: inline-block;
    background: var(--primaria);
    color: #fff;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 500;
    padding: .6rem 1.1rem;
    border-radius: 6px;
}

.preparando-botao:hover { background: var(--primaria-escura); }

.preparando-nota {
    margin: 1.5rem 0 0;
    font-size: .75rem;
    color: var(--texto-fraco);
}

/* Carga parada: a explicação e as duas saídas — retomar, ou seguir assim mesmo. */
.preparando-parada { margin-top: 1.25rem; }
.preparando-parada p { font-size: .88rem; line-height: 1.55; margin: 0 0 1rem; }

.preparando-acoes { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Botão, não link: retomar muda o estado do servidor. Um <a> convidaria a abrir em
   nova aba, e cada aba enfileiraria outra carga. */
button.preparando-botao { border: 0; cursor: pointer; font-family: inherit; }
button.preparando-botao:disabled { opacity: .6; cursor: default; }

/* O pedido de contato com o suporte é a saída real quando a origem recusa as páginas:
   destacado, mas sem alarme — não há nada errado do lado de quem está lendo. */
.preparando-suporte {
    background: var(--positivo-fundo);
    border-left: 3px solid var(--primaria);
    padding: .7rem .9rem;
    border-radius: 4px;
}

.banner-acao {
    margin-left: .75rem;
    color: var(--primaria);
    font-weight: 600;
    text-decoration: underline;
}

/* Escurecimento da série não focada: 0.7, e não os 0.4 do tema do Radzen.
   
   As duas séries dividem o mesmo eixo de valores, e quando o ano corrente é uma fração
   do anterior a barra verde mede poucos pixels. A 40% ela desaparece — passar o mouse
   no cinza parecia apagar o gráfico inteiro, enquanto o caminho inverso não incomodava,
   porque a barra cinza é grande e sobrevive ao mesmo 40%.

   O efeito era simétrico o tempo todo; o que não era simétrico é o quanto cada série
   aguenta perder. 70% mantém a barra fina legível e ainda destaca a série sob o cursor. */
.rz-chart-series-hover svg:has(> g > .rz-state-hover) .rz-column-series,
.rz-chart-series-hover svg:has(> g > :hover) .rz-column-series {
    opacity: .7;
}

/* Navegação da janela do gráfico */
.navega-periodo {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    margin-right: .75rem;
}

.navega-periodo button {
    border: 1px solid var(--borda);
    background: var(--cartao);
    color: var(--primaria);
    border-radius: 4px;
    /* Largura mínima em vez de fixa: "‹‹" não cabe no mesmo quadrado de "‹". */
    min-width: 1.75rem;
    padding: 0 .25rem;
    height: 1.75rem;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
}

.navega-periodo button:hover:not(:disabled) { background: var(--positivo-fundo); }

/* Desabilitado, e não escondido: some no fim do histórico e a barra mudaria de
   tamanho a cada clique, além de esconder que existe um limite. */
.navega-periodo button:disabled { opacity: .35; cursor: default; }

.faixa-visivel {
    font-size: .75rem;
    color: var(--texto-fraco);
    min-width: 9rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* ---------- abas entre relatórios ---------- */

/* Abaixo do cabeçalho e acima do conteúdo: a troca de relatório é uma mudança maior
   que a de dimensão, e precisa de um lugar mais alto na hierarquia da página. */
.abas-relatorios {
    display: flex;
    gap: .25rem;
    padding: 0 1rem;
    border-bottom: 1px solid var(--borda, #e2e5e9);
    background: var(--fundo-painel, #fff);
}

.abas-relatorios a {
    padding: .6rem 1rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--texto-fraco, #6b7280);
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.abas-relatorios a:hover { color: var(--texto, #111827); }

.abas-relatorios a.ativo {
    color: var(--primaria-clara, #2F65CC);
    border-bottom-color: var(--primaria-clara, #2F65CC);
}

/* ---------- curva ABC ---------- */

/* Verde, âmbar e cinza: a faixa A é o que se protege, a C é a cauda. Vermelho ficaria
   de fora porque faixa C não é defeito — é o resultado normal de uma curva. */
.selo-abc {
    display: inline-block;
    min-width: 1.4rem;
    padding: .1rem .35rem;
    border-radius: 3px;
    font-size: .75rem;
    font-weight: 600;
    color: #fff;
}

.selo-A, .faixa-A .preenchido { background: var(--primaria); }
.selo-B, .faixa-B .preenchido { background: #b8860b; }
.selo-C, .faixa-C .preenchido { background: #8a929c; }

.kpi.faixa-A .valor { color: var(--primaria); }
.kpi.faixa-B .valor { color: #b8860b; }
.kpi.faixa-C .valor { color: #8a929c; }

.acumulado {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.acumulado .trilho {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--borda, #e2e5e9);
    overflow: hidden;
}

.acumulado .preenchido { height: 100%; }

.acumulado span {
    min-width: 3.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: .8125rem;
}

/* Confirmação do atalho oculto de reconciliação (Ctrl+Alt+Shift+R).
   Fundo mais forte que o banner comum de propósito: é uma pergunta, não um aviso,
   e fica no mesmo lugar onde o usuário já está acostumado a só ler. */
.banner.confirmacao {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    background: #E3F2FD;
    border-bottom-color: #90CAF9;
    color: #0D47A1;
}

.banner.confirmacao button {
    border: 1px solid #90CAF9;
    background: #fff;
    color: #0D47A1;
    border-radius: 4px;
    padding: .25rem .75rem;
    font-size: .78rem;
    cursor: pointer;
}

.banner.confirmacao button:first-of-type {
    background: #0D47A1;
    border-color: #0D47A1;
    color: #fff;
    font-weight: 600;
}