/**
 * Quantilica Design System (QDS) — Dashboards Declarativos (N10)
 * Grid CSS de 12 colunas, filete editorial, tipografia tabular.
 * P12: altura de figura reservada via tokens (zero CLS), barra de
 * leitura touch (.q-chart-readout) e touch-action pan-y nos canvas.
 * Flat design: feedback visual apenas via border-color / background-color.
 */

.q-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--q-grid-gap);
    align-items: stretch;
}

.q-dashboard-grid {
    width: 100%;
    max-width: var(--q-content-max);
    margin-inline: auto;
}

.q-col-base-1 { grid-column: span 1 / span 1; }
.q-col-base-2 { grid-column: span 2 / span 2; }
.q-col-base-3 { grid-column: span 3 / span 3; }
.q-col-base-4 { grid-column: span 4 / span 4; }
.q-col-base-5 { grid-column: span 5 / span 5; }
.q-col-base-6 { grid-column: span 6 / span 6; }
.q-col-base-7 { grid-column: span 7 / span 7; }
.q-col-base-8 { grid-column: span 8 / span 8; }
.q-col-base-9 { grid-column: span 9 / span 9; }
.q-col-base-10 { grid-column: span 10 / span 10; }
.q-col-base-11 { grid-column: span 11 / span 11; }
.q-col-base-12 { grid-column: span 12 / span 12; }

.q-row-1 { grid-row: span 1 / span 1; }
.q-row-2 { grid-row: span 2 / span 2; }
.q-row-3 { grid-row: span 3 / span 3; }
.q-row-4 { grid-row: span 4 / span 4; }
.q-row-5 { grid-row: span 5 / span 5; }
.q-row-6 { grid-row: span 6 / span 6; }

@media (min-width: 576px) {
    .q-col-sm-1 { grid-column: span 1 / span 1; }
    .q-col-sm-2 { grid-column: span 2 / span 2; }
    .q-col-sm-3 { grid-column: span 3 / span 3; }
    .q-col-sm-4 { grid-column: span 4 / span 4; }
    .q-col-sm-5 { grid-column: span 5 / span 5; }
    .q-col-sm-6 { grid-column: span 6 / span 6; }
    .q-col-sm-7 { grid-column: span 7 / span 7; }
    .q-col-sm-8 { grid-column: span 8 / span 8; }
    .q-col-sm-9 { grid-column: span 9 / span 9; }
    .q-col-sm-10 { grid-column: span 10 / span 10; }
    .q-col-sm-11 { grid-column: span 11 / span 11; }
    .q-col-sm-12 { grid-column: span 12 / span 12; }
}

@media (min-width: 768px) {
    .q-col-md-1 { grid-column: span 1 / span 1; }
    .q-col-md-2 { grid-column: span 2 / span 2; }
    .q-col-md-3 { grid-column: span 3 / span 3; }
    .q-col-md-4 { grid-column: span 4 / span 4; }
    .q-col-md-5 { grid-column: span 5 / span 5; }
    .q-col-md-6 { grid-column: span 6 / span 6; }
    .q-col-md-7 { grid-column: span 7 / span 7; }
    .q-col-md-8 { grid-column: span 8 / span 8; }
    .q-col-md-9 { grid-column: span 9 / span 9; }
    .q-col-md-10 { grid-column: span 10 / span 10; }
    .q-col-md-11 { grid-column: span 11 / span 11; }
    .q-col-md-12 { grid-column: span 12 / span 12; }
}

@media (min-width: 992px) {
    .q-col-lg-1 { grid-column: span 1 / span 1; }
    .q-col-lg-2 { grid-column: span 2 / span 2; }
    .q-col-lg-3 { grid-column: span 3 / span 3; }
    .q-col-lg-4 { grid-column: span 4 / span 4; }
    .q-col-lg-5 { grid-column: span 5 / span 5; }
    .q-col-lg-6 { grid-column: span 6 / span 6; }
    .q-col-lg-7 { grid-column: span 7 / span 7; }
    .q-col-lg-8 { grid-column: span 8 / span 8; }
    .q-col-lg-9 { grid-column: span 9 / span 9; }
    .q-col-lg-10 { grid-column: span 10 / span 10; }
    .q-col-lg-11 { grid-column: span 11 / span 11; }
    .q-col-lg-12 { grid-column: span 12 / span 12; }
}

@media (min-width: 1200px) {
    .q-col-xl-1 { grid-column: span 1 / span 1; }
    .q-col-xl-2 { grid-column: span 2 / span 2; }
    .q-col-xl-3 { grid-column: span 3 / span 3; }
    .q-col-xl-4 { grid-column: span 4 / span 4; }
    .q-col-xl-5 { grid-column: span 5 / span 5; }
    .q-col-xl-6 { grid-column: span 6 / span 6; }
    .q-col-xl-7 { grid-column: span 7 / span 7; }
    .q-col-xl-8 { grid-column: span 8 / span 8; }
    .q-col-xl-9 { grid-column: span 9 / span 9; }
    .q-col-xl-10 { grid-column: span 10 / span 10; }
    .q-col-xl-11 { grid-column: span 11 / span 11; }
    .q-col-xl-12 { grid-column: span 12 / span 12; }
}

@media (min-width: 1400px) {
    .q-col-xxl-1 { grid-column: span 1 / span 1; }
    .q-col-xxl-2 { grid-column: span 2 / span 2; }
    .q-col-xxl-3 { grid-column: span 3 / span 3; }
    .q-col-xxl-4 { grid-column: span 4 / span 4; }
    .q-col-xxl-5 { grid-column: span 5 / span 5; }
    .q-col-xxl-6 { grid-column: span 6 / span 6; }
    .q-col-xxl-7 { grid-column: span 7 / span 7; }
    .q-col-xxl-8 { grid-column: span 8 / span 8; }
    .q-col-xxl-9 { grid-column: span 9 / span 9; }
    .q-col-xxl-10 { grid-column: span 10 / span 10; }
    .q-col-xxl-11 { grid-column: span 11 / span 11; }
    .q-col-xxl-12 { grid-column: span 12 / span 12; }
}

/* Container query: cada widget é um container de inline-size, permitindo
   que componentes internos ajustem pelo espaço real (container q-widget). */
.q-widget {
    container-type: inline-size;
    container-name: q-widget;
}

/* Order e grid-auto-flow: dense são efeitos de rearranjo de desktop:
   restritos a telas >= lg (min-width: 992px). Qualquer regra com `order`
   para widgets deve viver exclusivamente dentro deste breakpoint. */
@media (min-width: 992px) {
    .q-grid-dense,
    .q-dashboard-grid.q-grid-dense {
        grid-auto-flow: dense;
    }
}

/* Filete editorial: barra vertical de 2px x 2rem na cor de acento. */
.q-accent-stripe {
    display: inline-block;
    width: 2px;
    height: 2rem;
    min-height: 2rem;
    background-color: var(--q-accent);
    border-radius: 1px;
    flex-shrink: 0;
}

/* Card de KPI editorial: layout horizontal com filete de acento à esquerda e sparkline fluido. */
.q-kpi-card.d-flex,
.card.q-kpi-card:has(.q-accent-stripe) {
    flex-direction: row;
}

.q-kpi-card .q-sparkline {
    width: 100%;
    max-width: 100%;
    display: block;
}

/* Tipografia tabular para numerais alinhados em KPIs e tabelas. */
.q-num-tabular {
    font-family: var(--q-font-data);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
}

/* ==========================================================================
   P12 — Figuras de gráfico
   Altura reservada via tokens (--q-chart-h-*) para zerar CLS; barra de
   leitura fixa acima do gráfico (touch); touch-action pan-y nos canvas.
   ========================================================================== */
.q-chart-figure {
    position: relative;
    height: var(--q-chart-h-md, 340px);
    margin: 0;
}

.q-chart-figure[data-height="sm"],
.q-chart-figure.q-chart-h-sm {
    height: var(--q-chart-h-sm, 260px);
}

.q-chart-figure[data-height="lg"],
.q-chart-figure.q-chart-h-lg {
    height: var(--q-chart-h-lg, 420px);
}

.q-chart-figure[data-height="hero"],
.q-chart-figure.q-chart-h-hero {
    height: var(--q-chart-h-hero, 480px);
}

/* Skeleton shimmer unificado (zero CLS) para figuras antes da inicialização */
.q-chart-figure:not([data-widget-state="ready"]) {
    background-color: var(--q-bg-surface-alt, #F8FAFC);
    border: 1px solid var(--q-border-subtle, #E2E8F0);
    border-radius: var(--q-radius-sm, 4px);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: q-chart-shimmer 1.8s infinite ease-in-out;
}

[data-bs-theme="dark"] .q-chart-figure:not([data-widget-state="ready"]) {
    background-color: var(--q-bg-surface-alt, #1E293B);
    border-color: var(--q-border-subtle, #334155);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0) 100%
    );
}

.q-chart-figure:not([data-widget-state="ready"]) canvas {
    opacity: 0;
}

.q-chart-figure[data-widget-state="ready"] canvas {
    opacity: 1;
}

@keyframes q-chart-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .q-chart-figure:not([data-widget-state="ready"]) {
        animation: none;
    }
}

/* Canvas de dashboards: pan vertical nativo (a página rola com o dedo;
   o gesto horizontal fica para o gráfico). */
.q-chart-figure canvas {
    touch-action: pan-y;
}

/* Barra de leitura fixa: reservada acima da figura, invisível em ponteiros
   finos (tooltip flutuante padrão) e exibida em telas de toque (o dedo não
   cobre os números). Conteúdo projetado pelo plugin qReadout. */
.q-chart-readout {
    display: none;
    min-height: 1.5rem;
    margin-bottom: var(--q-space-2, 0.5rem);
    flex-wrap: wrap;
    align-items: center;
    gap: var(--q-space-2, 0.5rem) var(--q-space-4, 1rem);
    color: var(--q-text-main, #0F172A);
    font-size: 0.8125rem;
}

.q-chart-readout:empty::before {
    content: "Toque no gráfico para ver os valores";
    color: var(--q-text-muted, #64748B);
    font-weight: 500;
}

@media (hover: none) and (pointer: coarse) {
    .q-chart-readout {
        display: flex;
    }
}

.q-readout-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.q-readout-swatch {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--q-chart-cat-1, #7C8BA1);
    flex-shrink: 0;
}

.q-readout-label {
    color: var(--q-text-muted, #64748B);
}

.q-readout-value {
    font-family: var(--q-font-data);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   P13 — Tabela densa responsiva
   Modos scroll (thead sticky + 1a coluna sticky), priority (colunas
   secundárias ocultáveis, toggle CSS-only) e cards (roles ARIA de tabela
   sobre estrutura div, cards no mobile / grid >=768px).
   Flat design: feedback exclusivamente via border-color/background-color.
   ========================================================================== */

/* Wrapper de rolagem da tabela. max-height limita a região para o
   thead sticky (position: sticky; top: 0) ter efeito: sticky referencia
   o container de rolagem mais próximo, que precisa ter overflow próprio. */
.q-tbl-scroll {
    max-height: 70vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.q-tbl-scroll thead th {
    white-space: nowrap;
    vertical-align: bottom;
}

/* thead sticky: cabeçalho visível ao rolar o wrapper. Fundo opaco é
   obrigatório — sem ele o conteúdo das linhas aparece por baixo. */
.q-tbl-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--q-bg-surface, #fff);
}

/* 1a coluna sticky: rótulo da linha permanece visível ao rolar
   horizontalmente em 360px. Fundo opaco + filete lateral (border —
   a sombra é proibida pelo QDS). */
.q-tbl-sticky .q-tbl-sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--q-bg-surface, #fff);
    border-inline-end: 1px solid var(--q-border-subtle, #dee2e6);
}

.q-tbl-sticky thead th.q-tbl-sticky-col {
    z-index: 3;
}

/* --- Modo priority: checkbox oculto + label como botão (sem JS) --- */
.q-tbl-collapse-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.q-tbl-collapse-input:focus-visible ~ .q-tbl-toggle {
    outline: 2px solid var(--q-accent, #0F4C81);
}

.q-tbl-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--q-space-2, 0.5rem);
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--q-border-subtle, #dee2e6);
    border-radius: var(--q-radius-sm, 4px);
    color: var(--q-text-main, #0F172A);
    font-size: 0.875rem;
}

.q-tbl-toggle-hide,
.q-tbl-collapse-input:checked ~ .q-tbl-toggle .q-tbl-toggle-show {
    display: none;
}

.q-tbl-collapse-input:checked ~ .q-tbl-toggle .q-tbl-toggle-hide {
    display: inline;
}

/* Colunas secundárias recolhidas enquanto o checkbox não está marcado.
   O modo é "mobile_layout": o recolhimento vale APENAS em telas estreitas
   (< 768px); no desktop todas as colunas ficam visíveis. */
@media (max-width: 767.98px) {
    .q-tbl-collapse-input:not(:checked) ~ .q-tbl-scroll .q-tbl-col-sec {
        display: none;
    }
}

/* Desktop (>=768px): o toggle e o checkbox não têm função (nada é ocultado). */
@media (min-width: 768px) {
    .q-tbl-toggle,
    .q-tbl-collapse-input {
        display: none;
    }
}

/* --- Modo cards: cards individuais no mobile (estrutura role=table) --- */
.q-tbl-cards {
    display: block;
    border: 1px solid var(--q-border-subtle, #dee2e6);
}

.q-tbl-cards-caption {
    display: block;
    padding: var(--q-space-2, 0.5rem) var(--q-space-3, 0.75rem) 0;
}

.q-tbl-card {
    display: block;
    padding: var(--q-space-3, 0.75rem);
    border-top: 1px solid var(--q-border-subtle, #dee2e6);
}

.q-tbl-card-head {
    display: none;
}

.q-tbl-card-title {
    display: block;
    margin-bottom: var(--q-space-1, 0.25rem);
    font-weight: 600;
    color: var(--q-text-main, #0F172A);
}

.q-tbl-card-label {
    display: inline-block;
    min-width: 40%;
    color: var(--q-text-muted, #64748B);
    font-size: 0.8125rem;
}

.q-tbl-card-value {
    font-family: var(--q-font-data);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --- P14: alvos de toque >= 44x44px em ponteiros grossos (mobile) --- */
@media (hover: none) and (pointer: coarse) {
    .q-tbl-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    .q-export-btn,
    .q-horizon-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Desktop (>=768px): o mesmo markup role=table vira grade tabular. */
@media (min-width: 768px) {
    .q-tbl-cards [role="row"] {
        display: grid;
        grid-template-columns: repeat(var(--q-tbl-cols, 2), minmax(0, 1fr));
        align-items: center;
        padding: 0;
    }

    .q-tbl-card-head {
        display: grid;
        font-weight: 600;
        color: var(--q-text-main, #0F172A);
        border-top: 0;
    }

    .q-tbl-cards [role="cell"],
    .q-tbl-cards [role="columnheader"],
    .q-tbl-cards [role="rowheader"] {
        padding: var(--q-space-2, 0.5rem) var(--q-space-3, 0.75rem);
    }

    .q-tbl-card-title {
        display: block;
        margin: 0;
        font-weight: normal;
    }

    .q-tbl-card-label {
        display: none;
    }
}

/* --- P22 Widgets v2: small multiplos, heatmap, timeline, choropleth --- */

.q-sm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--q-space-2, 0.5rem);
}

/* Escala de calor sequencial (quartis) — tokens QDS com fallback santo. */
.q-heat-cell {
    text-align: center;
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    background-color: var(--q-heat-n-bg, #F1F5F9);
    color: var(--q-text-main, #0F172A);
}

.q-heat-l0 { background-color: var(--q-heat-l0, #E0F2FE); color: var(--q-text-main, #0F172A); }
.q-heat-l1 { background-color: var(--q-heat-l1, #BAE6FD); color: var(--q-text-main, #0F172A); }
.q-heat-l2 { background-color: var(--q-heat-l2, #38BDF8); color: var(--q-text-main, #0F172A); }
.q-heat-l3 { background-color: var(--q-heat-l3, #0C4A6E); color: var(--q-heat-l3-fg, #F8FAFC); }
.q-heat-none { background-color: var(--q-heat-n-bg, #F1F5F9); color: var(--q-text-muted, #94A3B8); }

/* Especificidade extra para vencer .table>:not(caption)>*>* do Bootstrap 5. */
.q-heat-table td.q-heat-cell.q-heat-l0, .table .q-heat-cell.q-heat-l0 { background-color: var(--q-heat-l0, #E0F2FE) !important; color: var(--q-text-main, #0F172A); }
.q-heat-table td.q-heat-cell.q-heat-l1, .table .q-heat-cell.q-heat-l1 { background-color: var(--q-heat-l1, #BAE6FD) !important; color: var(--q-text-main, #0F172A); }
.q-heat-table td.q-heat-cell.q-heat-l2, .table .q-heat-cell.q-heat-l2 { background-color: var(--q-heat-l2, #38BDF8) !important; color: var(--q-text-main, #0F172A); }
.q-heat-table td.q-heat-cell.q-heat-l3, .table .q-heat-cell.q-heat-l3 { background-color: var(--q-heat-l3, #0C4A6E) !important; color: var(--q-heat-l3-fg, #F8FAFC); }
.q-heat-table td.q-heat-cell.q-heat-none, .table .q-heat-cell.q-heat-none { background-color: var(--q-heat-n-bg, #F1F5F9) !important; color: var(--q-text-muted, #94A3B8); }

.q-heat-head { white-space: nowrap; }

.q-export-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.q-export-btn {
    background: transparent;
    border: 1px solid var(--q-border, #CBD5E1);
    border-radius: 0.375rem;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--q-text-muted, #64748B);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.q-export-btn:hover,
.q-export-btn:focus-visible {
    color: var(--q-text-main, #0F172A);
    border-color: var(--q-text-muted, #64748B);
    background-color: var(--q-surface-alt, #F8FAFC);
}

.q-release-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.q-release-item {
    display: flex;
    align-items: baseline;
    gap: var(--q-space-2, 0.5rem);
    padding: var(--q-space-1, 0.25rem) 0;
    border-bottom: 1px solid var(--q-border-subtle, #E2E8F0);
}

.q-release-item:last-child { border-bottom: 0; }

.q-release-title { flex-grow: 1; }

/* Choropleth BR: mapa vetorial oficial das 27 UFs do Brasil (IBGE N3) com escala sequencial QDS. */
.q-choro-container { width: 100%; position: relative; }
.q-choro-svg { width: 100%; max-height: 480px; height: auto; display: block; margin: 0 auto; }

.q-choro-state {
    stroke: var(--q-border-subtle, #ffffff);
    stroke-width: 1;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: fill 0.15s ease, stroke 0.15s ease, filter 0.15s ease;
    cursor: pointer;
}

.q-choro-state:hover {
    filter: brightness(0.92);
    stroke: var(--q-text-main, #0F172A);
    stroke-width: 1.5;
}

[data-bs-theme="dark"] .q-choro-state {
    stroke: var(--q-border-subtle, #334155);
}

[data-bs-theme="dark"] .q-choro-state:hover {
    filter: brightness(1.2);
    stroke: var(--q-text-main, #F8FAFC);
}

.q-choro-tile { stroke: var(--q-border-subtle, #94A3B8); stroke-width: 1; }
.q-choro-l0 { fill: var(--q-heat-l0, #E0F2FE); background-color: var(--q-heat-l0, #E0F2FE); }
.q-choro-l1 { fill: var(--q-heat-l1, #BAE6FD); background-color: var(--q-heat-l1, #BAE6FD); }
.q-choro-l2 { fill: var(--q-heat-l2, #38BDF8); background-color: var(--q-heat-l2, #38BDF8); }
.q-choro-l3 { fill: var(--q-heat-l3, #0C4A6E); background-color: var(--q-heat-l3, #0C4A6E); }
.q-choro-none { fill: var(--q-heat-n-bg, #F1F5F9); background-color: var(--q-heat-n-bg, #F1F5F9); }

.q-choro-uf-label {
    font-size: 11px;
    font-weight: 700;
    fill: var(--q-text-main, #0F172A);
    font-family: var(--q-font-data, 'Inter', sans-serif);
    paint-order: stroke fill;
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 2.5px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
    user-select: none;
}

[data-bs-theme="dark"] .q-choro-uf-label {
    fill: var(--q-text-main, #F8FAFC);
    stroke: var(--q-bg-surface-1, rgba(15, 23, 42, 0.9));
}

.q-choro-callout-line {
    stroke: var(--q-border-subtle, #94A3B8);
    stroke-width: 1;
    stroke-dasharray: 2 2;
    fill: none;
    pointer-events: none;
}

.q-choro-legend-bar {
    border-radius: 4px;
    overflow: hidden;
    height: 12px;
    border: 1px solid var(--q-border-subtle, #CBD5E1);
}

.q-choro-legend-swatch {
    display: inline-block;
    width: 24px;
    height: 12px;
}

.q-choro-legend-swatch.q-choro-none {
    width: 12px;
    height: 12px;
    border: 1px solid var(--q-border-subtle, #CBD5E1);
    border-radius: 2px;
}

.q-choro-uf {
    font-size: 11px;
    font-weight: 600;
    fill: var(--q-text-main, #0F172A);
    font-family: var(--q-font-data, 'Inter', sans-serif);
}

.q-choro-val {
    font-size: 11px;
    fill: var(--q-text-main, #0F172A);
    font-variant-numeric: tabular-nums;
    font-family: var(--q-font-data, 'Inter', sans-serif);
}

/* ==========================================================================
   P2 — Barra de Horizonte Temporal (Flat Design QDS)
   ========================================================================== */
.q-horizon-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--q-space-3, 0.75rem);
    padding-bottom: var(--q-space-3, 0.75rem);
    border-bottom: 1px solid var(--q-border-subtle, #E2E8F0);
}

.q-horizon-group {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--q-border, #E2E8F0);
    border-radius: var(--q-radius-sm, 4px);
    background-color: var(--q-bg-surface, #FFFFFF);
    padding: 2px;
    gap: 2px;
}

.q-horizon-btn {
    border: 0;
    border-radius: var(--q-radius-sm, 3px);
    background: transparent;
    color: var(--q-text-muted, #64748B);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    cursor: pointer;
    line-height: 1.25;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.q-horizon-btn:hover {
    color: var(--q-text-main, #0F172A);
    background-color: var(--q-bg-surface-alt, #F8FAFC);
}

.q-horizon-btn.active,
.q-horizon-btn[aria-pressed="true"] {
    background-color: var(--q-accent, #0C4A6E);
    color: #FFFFFF;
}

[data-bs-theme="dark"] .q-horizon-bar {
    border-bottom-color: var(--q-border-subtle, #334155);
}

[data-bs-theme="dark"] .q-horizon-group {
    background-color: var(--q-bg-surface-alt, #1E293B);
    border-color: var(--q-border, #334155);
}

[data-bs-theme="dark"] .q-horizon-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

[data-bs-theme="dark"] .q-horizon-btn.active,
[data-bs-theme="dark"] .q-horizon-btn[aria-pressed="true"] {
    background-color: var(--q-accent, #0284C7);
    color: #FFFFFF;
}


/* Rótulo dinâmico do horizonte e card de utilidades para analistas (flat) */
.q-horizon-range {
    min-width: 12ch;
}

.q-dash-dev-card {
    padding: var(--q-space-4, 1rem);
    border: 1px solid var(--q-border-subtle, #E2E8F0);
    border-radius: 0.25rem;
    background-color: transparent;
}

[data-bs-theme="dark"] .q-dash-dev-card {
    border-color: var(--q-border-subtle, #334155);
}