/* Silhueta de carregamento do painel de vendas.
   Cores alinhadas ao tema escuro do módulo (var(--color-surface) superfície,
   var(--color-border) borda) já usado em VisaoGeral.razor.

   Movido de EsqueletoCarregamento.razor.css (CSS isolado) pra cá em
   25/07/2026: o bundle de CSS isolado da Razor Class Library
   (Cdc.Web.Modulos.Vendas.bundle.scp.css) não estava sendo referenciado
   em nenhum <link> do Shell (App.razor só linka Cdc.Web.Shell.styles.css,
   que não inclui CSS isolado de projetos referenciados nesta versão do
   .NET) — o esqueleto ficava montado no DOM (aria-busy/aria-live
   corretos) mas sem nenhum estilo visual, invisível. Todo seletor abaixo
   é prefixado com ".esqueleto" (a div raiz do componente) pra manter o
   mesmo isolamento que o CSS isolado dava automaticamente, já que este
   arquivo agora é global. */

.esqueleto {
    flex: 1;
    min-height: 620px;
}

.esqueleto .cartao {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 9px;
    padding: 8px;
    box-sizing: border-box;
}

/* Bloco fantasma: base sólida + faixa de brilho percorrendo.
   O gradiente é o único movimento — nada de opacity pulsante, que
   cansa mais a vista em tela cheia de blocos. */
.esqueleto .bloco {
    background-color: var(--color-border);
    background-image: linear-gradient(90deg, transparent 0%, var(--color-border-soft) 50%, transparent 100%);
    background-size: 320px 100%;
    background-repeat: no-repeat;
    border-radius: 3px;
    animation: esqueleto-brilho 1.4s infinite linear;
}

@keyframes esqueleto-brilho {
    0% { background-position: -320px 0; }
    100% { background-position: 320px 0; }
}

/* Delta Spec: movimento reduzido desliga a animação, mantendo a
   silhueta — que sozinha já cumpre o papel de mostrar a estrutura. */
@media (prefers-reduced-motion: reduce) {
    .esqueleto .bloco {
        animation: none;
        background-image: none;
    }
}

.esqueleto .circulo {
    border-radius: 50%;
    width: 84px;
    height: 84px;
    margin: 0 auto;
}

.esqueleto .linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.esqueleto .barras {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100%;
    margin-top: 10px;
}

/* --- Variante Visão Geral: as medidas de visao-geral-vendas.css
   (Python de 23/09) — 220 px à esquerda; à direita 335 px + 255 px --- */

.esqueleto .vg-grade {
    display: flex;
    gap: 12px;
}

.esqueleto .vg-coluna {
    width: 220px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
}

.esqueleto .vg-kpi {
    flex: none;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.esqueleto .vg-donut {
    flex: 1;
    min-height: 255px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.esqueleto .vg-donut .circulo {
    width: 135px;
    height: 135px;
}

.esqueleto .vg-direita {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.esqueleto .vg-linha-cima {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 10px;
    height: 335px;
}

.esqueleto .vg-barras {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.esqueleto .vg-barras .barras {
    flex: 1;
}

.esqueleto .vg-minis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    height: 255px;
}

.esqueleto .vg-mini {
    min-width: 0;
}

.esqueleto .vg-tabela {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* --- Variante Gráficos: 41% (tabelas 2 × 2 de 310 px) / 59% (gráficos
   2 × 2 de 202 px + "Total por Ano" em duas colunas, 212 px) --- */

.esqueleto .gr-grade {
    display: grid;
    grid-template-columns: 41% 59%;
    gap: 8px;
    align-items: start;
}

.esqueleto .gr-tabelas,
.esqueleto .gr-graficos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-width: 0;
}

.esqueleto .gr-tabela {
    height: 310px;
    display: flex;
    flex-direction: column;
}

.esqueleto .gr-grafico {
    height: 202px;
    display: flex;
    flex-direction: column;
}

.esqueleto .gr-grafico--total {
    grid-column: span 2;
    height: 212px;
}

@media (max-width: 1200px) {
    .esqueleto .gr-grade {
        grid-template-columns: 1fr;
    }
}

.esqueleto .gr-grafico .barras {
    flex: 1;
}

/* --- Variante RankingClientes: grade 2×2 do Python de 23/09 (duas
   matrizes em cima, dois gráficos embaixo), nas alturas dos blocos reais
   (345px e 320px, `.ranking-clientes-vendas__grade`) — a chegada do dado
   não desloca nada (telas-vendas-do-python-novo, bloco 4). --- */

.esqueleto .rk-grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 345px 320px;
    gap: 12px;
}

.esqueleto .rk-matriz,
.esqueleto .rk-grafico {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.esqueleto .rk-colunas {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 10px;
}

@media (max-width: 1100px) {
    .esqueleto .rk-grade {
        grid-template-columns: 1fr;
        grid-template-rows: 345px 345px 320px 320px;
    }
}

/* --- Variante Localidades: o layout do Python de 23/09 — cinco blocos
   na linha de cima, três na de baixo — e o cartão "Faturamento por
   Cidade" embaixo, nas medidas da tela real (`.localidades-vendas__cima`,
   `__baixo`; telas-vendas-do-python-novo, bloco 4). --- */

.esqueleto .loc-pilha {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.esqueleto .loc-cima {
    display: grid;
    grid-template-columns: 115px 195px 230px 370px minmax(0, 1fr);
    gap: 10px;
    min-height: 320px;
}

.esqueleto .loc-baixo {
    display: grid;
    grid-template-columns: 38% minmax(0, 31%) minmax(0, 1fr);
    gap: 10px;
    height: 430px;
}

.esqueleto .loc-bloco {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.esqueleto .loc-forma {
    flex: 1;
    border-radius: 40% 35% 45% 30% / 30% 40% 35% 45%;
}

.esqueleto .loc-tabela {
    display: flex;
    flex-direction: column;
}

@media (max-width: 1300px) {
    .esqueleto .loc-cima {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 1100px) {
    .esqueleto .loc-baixo {
        grid-template-columns: 1fr;
        height: auto;
    }

    .esqueleto .loc-baixo > .loc-bloco {
        height: 430px;
    }
}

/* --- Variante DrillDown: grid paginado do modal "Detalhamento de
   Vendas". Mesmo prefixo .esqueleto das demais, pela nota do topo. --- */

.esqueleto .dd-grade {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 9px;
    padding: 4px 10px;
}

.esqueleto .dd-grade .linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
    margin-top: 0;
}

.esqueleto .dd-grade .linha:last-child {
    border-bottom: none;
}

.esqueleto .dd-cabecalho {
    border-bottom: 1px solid var(--color-border-soft);
}

/* O .esqueleto tem min-height:620px, dimensionado pra tela cheia. No
   modal de drill-down isso estouraria a altura disponível — aqui o
   esqueleto acompanha o espaço do modal. */
.esqueleto:has(.dd-grade) {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* --- Variante Visitas: lista agrupada — nasceu para a agenda de Visitas
   (etapa 8), que saiu em 23/09/2026; hoje só a Consulta IA a usa. O painel
   Visitas usa a variante PainelVisitas, com as classes .dd-grade. --- */

.esqueleto .vs-grade {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 9px;
    overflow: hidden;
}

.esqueleto .vs-grupo-cabecalho {
    padding: 9px 14px;
    background: var(--color-surface-subtle);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.esqueleto .vs-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-surface-subtle);
    margin-top: 0;
}

/* --- Variante Canais de Venda (etapa 11): faixa de resumo (3
   indicadores + barra de proporção) sobre a matriz densa. As larguras
   de célula espelham a grade real de canais-venda-vendas.css (130px
   vendedor, 8×66px canal, 86px total, mix no resto) — silhueta que não
   bate com o layout desloca tudo quando o dado chega, que é o oposto do
   efeito desejado. --- */

.esqueleto .cv-grade {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.esqueleto .cv-resumo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
}

.esqueleto .cv-indicador {
    width: 132px;
    flex: none;
}

.esqueleto .cv-proporcao {
    flex: 1;
    min-width: 0;
}

.esqueleto .cv-matriz {
    padding: 10px 12px;
}

.esqueleto .cv-linha {
    display: grid;
    grid-template-columns: 130px repeat(7, 66px) 86px 1fr;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

/* Uma declaração por seletor (sem o bloco agrupado + override logo
   abaixo que a regra "duplicated selectors" do Sonar sinalizava): as três
   têm alturas diferentes de qualquer forma, então agrupar só pra
   sobrescrever em seguida não economizava nada. */
.esqueleto .cv-celula {
    height: 8px;
    width: 38px;
    justify-self: end;
}

.esqueleto .cv-total {
    height: 8px;
    width: 58px;
    justify-self: end;
}

.esqueleto .cv-mix {
    height: 12px;
    width: 100%;
    border-radius: 4px;
}