/* ============================================================================
   Blocos de DADOS das páginas geradas — indicador, gráfico, tabela e filtro de
   período (dashboard e relatórios). Complementa landing.css / landing-v2.css.
   Vale a mesma lei de cor: só tokens (--m50ui-* com fallback --m50-*), e
   --m50ui-primary jamais em `color` (é superfície) — texto usa --m50ui-accent-text.
   ========================================================================== */

/* ─── Estado vazio comum aos quatro blocos ──────────────────────────────── */

.site-dados-vazio {
    margin: 0;
    padding: var(--m50ui-sp-xl, 24px);
    border: 1px dashed var(--m50ui-border, var(--m50-border-light));
    border-radius: var(--m50ui-r-lg, 12px);
    text-align: center;
    font-size: var(--m50ui-fs-sm, 13px);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

/* ─── Indicador ─────────────────────────────────────────────────────────── */

.site-indicador__cartao {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--m50ui-sp-sm, 8px);
    padding: clamp(20px, 3vw, 32px);
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
    border-radius: var(--m50ui-r-lg, 12px);
}

.site-sec--esquerda .site-indicador__cartao { align-items: flex-start; text-align: left; }

.site-indicador__titulo {
    margin: 0;
    font-size: var(--m50ui-fs-sm, 13px);
    font-weight: var(--m50-font-weight-semibold, 600);
    letter-spacing: var(--m50-letter-spacing-wide, 0.04em);
    text-transform: uppercase;
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

.site-indicador__valor {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0;
    font-size: clamp(34px, 6vw, 56px);
    font-weight: var(--m50-font-weight-bold, 700);
    line-height: var(--m50-line-height-tight, 1.2);
    font-variant-numeric: tabular-nums;
    color: var(--m50ui-on-surface, var(--m50-text-primary));
}

.site-indicador__prefixo {
    margin-right: 0.22em;
    font-size: 0.5em;
    font-weight: var(--m50-font-weight-semibold, 600);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

.site-indicador__sufixo {
    font-size: 0.5em;
    font-weight: var(--m50-font-weight-semibold, 600);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

.site-indicador__valor--sem-dados { color: var(--m50ui-on-surface-muted, var(--m50-text-secondary)); }

.site-indicador__variacao {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--m50ui-fs-sm, 13px);
    font-weight: var(--m50-font-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
}

.site-indicador__variacao--alta { color: var(--m50ui-success, var(--m50-success)); }
.site-indicador__variacao--baixa { color: var(--m50ui-danger, var(--m50-danger)); }
.site-indicador__variacao--estavel { color: var(--m50ui-on-surface-muted, var(--m50-text-secondary)); }

.site-indicador__seta { font-size: 0.9em; line-height: 1; }

/* A comparação é contexto, não o dado: fica sempre em tom secundário. */
.site-indicador__comparacao {
    font-weight: var(--m50-font-weight-regular, 400);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

.site-indicador__aviso {
    margin: 0;
    font-size: var(--m50ui-fs-xs, 12px);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

/* ─── Gráfico ───────────────────────────────────────────────────────────── */

.site-grafico__figura {
    margin: 0;
    padding: var(--m50ui-sp-lg, 16px);
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
    border-radius: var(--m50ui-r-lg, 12px);
}

/* O viewBox estica na horizontal; a altura vem do descritor (style inline). */
.site-grafico__svg {
    display: block;
    width: 100%;
    overflow: visible;
}

.site-grafico__grade {
    stroke: var(--m50ui-border, var(--m50-border-light));
    stroke-width: 1;
    stroke-dasharray: 3 5;
    opacity: 0.55;
    vector-effect: non-scaling-stroke;
}

.site-grafico__zero {
    stroke: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
    stroke-width: 1;
    opacity: 0.6;
    vector-effect: non-scaling-stroke;
}

.site-grafico__area {
    fill: var(--m50ui-primary, var(--m50-primary));
    opacity: 0.14;
}

.site-grafico__linha {
    fill: none;
    stroke: var(--m50ui-primary, var(--m50-primary));
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Sem cantos arredondados: o viewBox estica na horizontal e o raio sairia oval. */
.site-grafico__barra { fill: var(--m50ui-primary, var(--m50-primary)); }

/* Rótulos em HTML (e não em <text>) porque o SVG estica e deformaria a fonte.
   Uma coluna por ponto mantém cada rótulo centrado na sua barra/vértice. */
.site-grafico__eixo {
    display: grid;
    grid-template-columns: repeat(var(--grafico-colunas, 1), 1fr);
    gap: 2px;
    margin-top: var(--m50ui-sp-sm, 8px);
}

.site-grafico__rotulo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-size: var(--m50ui-fs-xs, 12px);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

/* ─── Tabela de dados ───────────────────────────────────────────────────── */

.site-tabela-dados__rolagem {
    overflow-x: auto;
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
    border-radius: var(--m50ui-r-lg, 12px);
    background: var(--m50ui-surface, var(--m50-surface-elevated));
}

.site-tabela-dados__tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--m50ui-fs-sm, 13px);
}

.site-tabela-dados__tabela th,
.site-tabela-dados__tabela td {
    padding: 10px var(--m50ui-sp-lg, 16px);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--m50ui-border, var(--m50-border-light));
}

.site-tabela-dados__tabela th {
    background: var(--m50ui-bg, var(--m50-surface-secondary));
    font-weight: var(--m50-font-weight-semibold, 600);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
    letter-spacing: var(--m50-letter-spacing-wide, 0.04em);
    text-transform: uppercase;
    font-size: var(--m50ui-fs-xs, 12px);
}

.site-tabela-dados__tabela tbody tr:last-child td { border-bottom: 0; }

.site-tabela-dados__nota {
    margin: var(--m50ui-sp-sm, 8px) 0 0;
    font-size: var(--m50ui-fs-xs, 12px);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

/* ─── Filtro de período ─────────────────────────────────────────────────── */

.site-filtro-periodo__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--m50ui-sp-lg, 16px);
}

.site-filtro-periodo__titulo {
    margin: 0;
    font-size: var(--m50ui-fs-md, 15px);
    font-weight: var(--m50-font-weight-semibold, 600);
}

.site-filtro-periodo__opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--m50ui-sp-sm, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* O chip é <button> no painel interativo, <a> no site publicado e <span> no documento
   congelado — a mesma aparência nos três, porque para quem lê é o mesmo controle. O cursor é o
   que diferencia: só clica o que reconsulta de verdade. */
.site-filtro-periodo__chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--m50ui-border, var(--m50-border-light));
    border-radius: 999px;
    background: var(--m50ui-surface, var(--m50-surface-elevated));
    font: inherit;
    font-size: var(--m50ui-fs-sm, 13px);
    line-height: 1.4;
    text-decoration: none;
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
    cursor: default;
}

button.site-filtro-periodo__chip,
a.site-filtro-periodo__chip {
    cursor: pointer;
    transition: border-color 120ms ease, color 120ms ease;
}

button.site-filtro-periodo__chip:hover,
a.site-filtro-periodo__chip:hover {
    border-color: var(--m50ui-primary, var(--m50-primary));
    color: var(--m50ui-on-surface, var(--m50-text-primary));
}

.site-filtro-periodo__chip:focus-visible {
    outline: 2px solid var(--m50ui-accent-text, var(--m50-info));
    outline-offset: 2px;
}

/* O chip do período vigente: superfície de acento com texto sobre ela. */
.site-filtro-periodo__chip--ativo {
    background: var(--m50ui-primary, var(--m50-primary));
    border-color: var(--m50ui-primary, var(--m50-primary));
    color: var(--m50ui-on-primary, var(--m50-text-inverse));
    font-weight: var(--m50-font-weight-semibold, 600);
}

.site-filtro-periodo__nota {
    margin: var(--m50ui-sp-sm, 8px) 0 0;
    font-size: var(--m50ui-fs-xs, 12px);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
}

@media (max-width: 640px) {
    .site-filtro-periodo__barra { align-items: flex-start; flex-direction: column; }
}

/* ─── Impressão (relatório em A4) ───────────────────────────────────────── */

@media print {
    .site-indicador__cartao,
    .site-grafico__figura,
    .site-tabela-dados__rolagem {
        box-shadow: none;
        break-inside: avoid;
    }

    /* Sem rolagem no papel: a tabela precisa mostrar todas as colunas. */
    .site-tabela-dados__rolagem { overflow: visible; }
    .site-tabela-dados__tabela th,
    .site-tabela-dados__tabela td { white-space: normal; }

    .site-tabela-dados__tabela thead { display: table-header-group; }
    .site-tabela-dados__tabela tr { break-inside: avoid; }

    /* Chips inertes não fazem sentido impressos: sobra a nota com o período. */
    .site-filtro-periodo__chip:not(.site-filtro-periodo__chip--ativo) { display: none; }
}

/* ─── Selo de dados simulados ───────────────────────────────────────────────
   Amarelo de ATENÇÃO, não vermelho de erro: a página está funcionando: o que
   falta é a entidade ter uma Fonte de Dados vinculada no Universo. O selo
   acompanha o bloco em toda superfície — inclusive impresso, de propósito:
   uma folha de etiquetas com preço de mock vai parar na prateleira. */

.site-dados__simulado {
    display: flex;
    gap: var(--m50ui-sp-xs, 6px);
    align-items: baseline;
    margin: 0 0 var(--m50ui-sp-sm, 8px);
    padding: var(--m50ui-sp-xs, 6px) var(--m50ui-sp-sm, 10px);
    border: 1px solid var(--m50ui-warning, #d99e00);
    border-radius: var(--m50ui-radius-sm, 6px);
    background: color-mix(in srgb, var(--m50ui-warning, #d99e00) 12%, transparent);
    color: var(--m50ui-on-surface, var(--m50-text-primary));
    font-size: var(--m50ui-fs-xs, 12px);
    line-height: 1.4;
}

@media print {
    .site-dados__simulado {
        background: none;
        border-style: dashed;
    }
}

/* Aviso da consulta com dados na tela (truncamento, sobretudo). Discreto porque
   o número continua válido — só não é o total. */

.site-dados__aviso {
    display: flex;
    gap: var(--m50ui-sp-xs, 6px);
    align-items: baseline;
    margin: 0 0 var(--m50ui-sp-sm, 8px);
    color: var(--m50ui-on-surface-muted, var(--m50-text-secondary));
    font-size: var(--m50ui-fs-xs, 12px);
    line-height: 1.4;
}