/* 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: 3 colunas, igual ao layout real --- */

.esqueleto .vg-grade {
    display: grid;
    grid-template-columns: 200px 1fr 270px;
    gap: 14px;
    min-height: 620px;
}

.esqueleto .vg-coluna {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
}

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

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

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

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

.esqueleto .vg-minis {
    flex: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.esqueleto .vg-mini {
    height: 62px;
}

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

/* --- Variante Gráficos (etapa 2): 2 colunas --- */

.esqueleto .gr-grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    min-height: 620px;
}

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

.esqueleto .gr-grafico {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 96px;
}

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

/* --- Variante RankingClientes (etapa 4): 2 colunas, gráfico de barras
   horizontais fantasma à esquerda, tabela fantasma à direita --- */

.esqueleto .rk-grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    min-height: 620px;
}

.esqueleto .rk-grafico {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.esqueleto .rk-barras {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 8px;
    margin-top: 10px;
}

.esqueleto .rk-barra-linha {
    display: flex;
    align-items: center;
    gap: 8px;
}

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

/* --- Variante Localidades (etapa 5): silhueta de mapa (retângulo com
   border-radius grande simulando o contorno do Brasil) + silhueta de
   tabela ao lado — mesma grade lado a lado da tela real
   (`.localidades-vendas__grade`, ajustado em 28/07/2026). --- */

.esqueleto .loc-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 342px;
    gap: 12px;
}

.esqueleto .loc-mapa,
.esqueleto .loc-tabela {
    min-width: 0;
}

.esqueleto .loc-mapa-silhueta {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.esqueleto .loc-mapa-forma {
    flex: 1;
    min-width: 0;
    height: 420px;
    border-radius: 40% 35% 45% 30% / 30% 40% 35% 45%;
}

.esqueleto .loc-mapa-lateral {
    width: 150px;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

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

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

/* --- 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 (etapa 8): lista agrupada por urgência, não uma
   tabela paginada — larguras espelhando o cabeçalho real de
   Visitas.razor (Data 62px, Cliente flex, Cidade 132px, Tipo 104px,
   Status 100px pill). --- */

.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(6, 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;
}