/* ==========================================================================
   AvD 2026.1 — camada visual isolada do ciclo 2025
   --------------------------------------------------------------------------
   • Totalmente escopada em html[data-avd-year="2026"] (inerte para 2025).
   • Orientada a tokens (theme.css) → adapta a temas claro/escuro.
   • Reformulação institucional: menos densidade, hierarquia clara,
     superfícies definidas, bordas discretas, gráfico e comparador arejados.
   ========================================================================== */

/* --- Aliases 2026 apontando para os tokens semânticos (adaptam por tema) --- */
html[data-avd-year="2026"] {
    --avd26-surface: var(--surface);
    --avd26-surface-2: var(--surface-2);
    --avd26-surface-3: var(--surface-3);
    --avd26-border: var(--border);
    --avd26-hairline: var(--hairline);
    --avd26-text: var(--fg-strong);
    --avd26-text-2: var(--fg);
    --avd26-muted: var(--muted);
    --avd26-blue: var(--blue);
    --avd26-orange: var(--orange);
    --avd26-green: var(--green);
    --avd26-red: var(--red);

    /* Fonte única de altura da área do gráfico de 2026 */
    --avd-chart-height: clamp(340px, 46vh, 460px);
    --avd-cmp-max: 480px;
}

html[data-avd-year="2026"] body.question-dialog-open {
    overflow: hidden;
}

/* =========================================================
   Topbar / filtros
   ========================================================= */
html[data-avd-year="2026"] .filters select,
html[data-avd-year="2026"] .filters input,
html[data-avd-year="2026"] .filters button,
html[data-avd-year="2026"] .cycle-picker {
    border-radius: 10px;
}

html[data-avd-year="2026"] .filters select,
html[data-avd-year="2026"] .filters input[type="search"] {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--fg);
}

/* =========================================================
   Painéis
   ========================================================= */
html[data-avd-year="2026"] .panel {
    border-color: var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

html[data-avd-year="2026"] .panel-header h2 {
    color: var(--fg-strong);
    font-size: 15px;
    letter-spacing: -.01em;
}

html[data-avd-year="2026"] .panel-header small {
    color: var(--muted);
}

/* =========================================================
   KPIs (topo)
   ========================================================= */
html[data-avd-year="2026"] .cards {
    gap: 14px;
}

html[data-avd-year="2026"] .card,
html[data-avd-year="2026"] .card.kpi-block {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

/* Alinhamento consistente dos 4 KPIs: cabeçalho no topo, valores na base */
html[data-avd-year="2026"] .card.kpi-block {
    display: flex;
    flex-direction: column;
}

html[data-avd-year="2026"] .card.kpi-block .kpi-grid,
html[data-avd-year="2026"] .card.stat .stat-number {
    margin-top: auto;
}

html[data-avd-year="2026"] .card .kpi-head {
    color: var(--fg-strong);
    font-size: 13px;
    letter-spacing: .02em;
    margin-bottom: 8px;
}

html[data-avd-year="2026"] .kpi-grid .k,
html[data-avd-year="2026"] .stat-number {
    background: var(--surface-2);
    border-color: transparent;
}

html[data-avd-year="2026"] .kpi-grid .k .t {
    color: var(--muted);
}

html[data-avd-year="2026"] .card .v,
html[data-avd-year="2026"] .kpi-grid .k .v,
html[data-avd-year="2026"] .stat-number {
    color: var(--fg-strong);
    font-size: clamp(17px, 1.1vw, 21px);
    font-variant-numeric: tabular-nums;
}

/* Δ médio — leve destaque semântico (sinal + tinta, não só cor) */
html[data-avd-year="2026"] .card.kpi-block:last-child .kpi-head {
    color: var(--ink-blue);
}

/* =========================================================
   Cards de setor
   ========================================================= */
html[data-avd-year="2026"] .sectors-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

html[data-avd-year="2026"] .sector-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}

html[data-avd-year="2026"] .sector-card:hover,
html[data-avd-year="2026"] .sector-card:focus-visible {
    border-color: color-mix(in oklab, var(--blue) 42%, var(--border));
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    outline: none;
}

html[data-avd-year="2026"] .sector-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

html[data-avd-year="2026"] .sector-title {
    color: var(--fg-strong);
    font-weight: 700;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-avd-year="2026"] .sector-badge {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

html[data-avd-year="2026"] .sector-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

html[data-avd-year="2026"] .sector-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 7px 10px;
    border-radius: 9px;
    background: var(--surface-2);
    box-shadow: inset 3px 0 0 transparent;
}

html[data-avd-year="2026"] .sector-row.rc-l {
    box-shadow: inset 3px 0 0 var(--blue);
}

html[data-avd-year="2026"] .sector-row.rc-a {
    box-shadow: inset 3px 0 0 var(--orange);
}

html[data-avd-year="2026"] .sector-row.is-empty {
    background: transparent;
    box-shadow: none;
    border: 1px dashed var(--border);
}

html[data-avd-year="2026"] .sector-row-cap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fg-soft);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .02em;
    text-transform: uppercase;
}

html[data-avd-year="2026"] .sector-metrics {
    display: inline-flex;
    gap: 12px;
}

html[data-avd-year="2026"] .sector-metrics span {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    color: var(--fg-strong);
    font-size: 13px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

html[data-avd-year="2026"] .sector-metrics em {
    font-style: normal;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

html[data-avd-year="2026"] .sector-empty {
    color: var(--muted);
    font-size: 11.5px;
    font-style: italic;
}

/* =========================================================
   Tabela
   ========================================================= */
html[data-avd-year="2026"] #tbl thead th {
    background: var(--accent);
    border-bottom: 1px solid var(--border);
    color: var(--fg-strong);
    font-size: 11.5px;
    letter-spacing: .015em;
}

html[data-avd-year="2026"] #tbl tbody td {
    border-bottom-color: var(--hairline);
    color: var(--fg);
}

html[data-avd-year="2026"] #tbl .person-row {
    cursor: pointer;
    transition: background .15s ease, box-shadow .15s ease;
}

html[data-avd-year="2026"] #tbl .person-row:hover,
html[data-avd-year="2026"] #tbl .person-row:focus-visible {
    background: var(--tint-blue);
    outline: none;
}

html[data-avd-year="2026"] #tbl .person-row.is-selected {
    background: var(--tint-blue-strong);
    box-shadow: inset 3px 0 0 var(--blue);
}

html[data-avd-year="2026"] #tbl .person-row .num {
    color: var(--fg-strong);
    font-weight: 750;
}

html[data-avd-year="2026"] .badge .dot {
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--surface) 60%, transparent);
}

/* Expansão do colaborador */
html[data-avd-year="2026"] .expand-row > td {
    background: var(--surface-2);
    padding: 0;
}

html[data-avd-year="2026"] .expand-wrap {
    gap: 10px;
    padding: 12px;
    background: var(--surface-2);
}

html[data-avd-year="2026"] .person-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

html[data-avd-year="2026"] .person-result-card {
    display: grid;
    grid-template-columns: minmax(150px, 1.35fr) repeat(3, minmax(74px, .62fr)) minmax(160px, 1.1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

html[data-avd-year="2026"] .person-result-card.leader {
    box-shadow: inset 3px 0 0 var(--blue);
}

html[data-avd-year="2026"] .person-result-card.auto {
    box-shadow: inset 3px 0 0 var(--orange);
}

html[data-avd-year="2026"] .person-result-owner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--fg-strong);
    font-size: 13px;
}

html[data-avd-year="2026"] .person-result-metric {
    min-width: 0;
    text-align: center;
}

html[data-avd-year="2026"] .person-result-metric span,
html[data-avd-year="2026"] .person-delta-strip span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

html[data-avd-year="2026"] .person-result-metric strong {
    color: var(--fg-strong);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

html[data-avd-year="2026"] .person-result-zone {
    min-width: 0;
    padding: 6px 9px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--fg);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
    text-align: center;
}

html[data-avd-year="2026"] .person-delta-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

html[data-avd-year="2026"] .person-delta-strip > div {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-2);
}

html[data-avd-year="2026"] .person-delta-strip strong {
    color: var(--fg-strong);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   Área do gráfico — FONTE ÚNICA DE VERDADE do layout 2026
   Base (mobile-first): coluna única. Gráfico → legenda → comparador.
   O #cmp-box é SEMPRE o único container com rolagem interna:
   .cmp-card/.cmp-details/.cmp-list nunca rolam e nunca ditam a altura.
   ========================================================= */
html[data-avd-year="2026"] #chart-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    align-items: start;
    height: auto;
    gap: 12px;
}

html[data-avd-year="2026"] #chart-box {
    order: 1;
    height: clamp(280px, 44vh, 340px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--chart-box-bg-a), var(--chart-box-bg-b));
    box-shadow: var(--shadow-sm);
}

html[data-avd-year="2026"] #chart-legend {
    order: 2;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 10px 14px;
    margin-right: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    /* faixa horizontal compacta (não rouba coluna) */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}

html[data-avd-year="2026"] #cmp-box {
    order: 3;
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: var(--avd-cmp-max);
    min-height: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    /* ÚNICO scroll do comparador */
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in oklab, var(--muted) 55%, transparent) transparent;
}

html[data-avd-year="2026"] #cmp-box::-webkit-scrollbar {
    width: 10px;
}

html[data-avd-year="2026"] #cmp-box::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--muted) 45%, transparent);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
}

/* Neutraliza larguras/colunas fixas do layout legado (2025) que vazariam
   para 2026 via media/container queries globais. O posicionamento de 2026
   é definido só aqui (base = fluxo natural; desktop = grade explícita). */
html[data-avd-year="2026"] #chart-box,
html[data-avd-year="2026"] #cmp-box,
html[data-avd-year="2026"] #chart-legend {
    width: auto;
    grid-column: auto;
    grid-row: auto;
}

html[data-avd-year="2026"] #chart-legend h3 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

html[data-avd-year="2026"] #chart-legend .legend-header {
    margin: 0;
    padding: 0;
    border: 0;
    display: inline-flex;
    gap: 8px;
}

html[data-avd-year="2026"] #chart-legend .legend-chip {
    min-height: 28px;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--fg);
    font-size: 12px;
}

html[data-avd-year="2026"] #chart-legend .zones {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

html[data-avd-year="2026"] #chart-legend .zones li {
    min-height: auto;
    padding: 4px 8px;
    color: var(--fg);
    font-size: 12.5px;
}

html[data-avd-year="2026"] #chart-legend .pill {
    width: 12px;
    height: 12px;
}

html[data-avd-year="2026"] #chart-legend p {
    flex: 1 1 100%;
    margin: 2px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    line-height: 1.5;
}

/* Toolbar do gráfico */
html[data-avd-year="2026"] .btn-tool {
    background: color-mix(in oklab, var(--surface) 82%, transparent);
    border: 1px solid var(--border);
    color: var(--fg-strong);
    backdrop-filter: blur(6px);
}

html[data-avd-year="2026"] .btn-tool:hover {
    background: var(--surface);
    border-color: color-mix(in oklab, var(--blue) 40%, var(--border));
}

/* Tablet (≥768px): gráfico em largura total, um pouco maior; comparador
   continua abaixo, limitado, com rolagem interna própria. */
@media (min-width: 768px) and (max-width: 1099px) {
    html[data-avd-year="2026"] #chart-box {
        height: clamp(340px, 42vh, 440px);
    }

    html[data-avd-year="2026"] #cmp-box {
        max-height: 500px;
    }
}

/* Desktop (≥1100px): a legenda/índice fica SEMPRE À ESQUERDA do gráfico (nunca
   abaixo, nunca entre o gráfico e o comparador). Usa grid-template-areas para
   posição estável — a legenda NÃO muda de lado ao abrir o comparador.
   - sem colaborador:  [ legenda | gráfico ]
   - com colaborador:  [ legenda | gráfico | comparador ]  (mesma linha/altura)
   grid-template-rows fixa a faixa → o comparador NÃO cresce a página. */
@media (min-width: 1100px) {
    /* Áreas fixas: cada painel ocupa sua área, independente da ordem no DOM. */
    html[data-avd-year="2026"] #chart-row #chart-legend {
        grid-area: legend;
        height: var(--avd-chart-height);
        overflow: auto;
        border: 1px solid var(--border);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
        padding: 10px;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 9px;
    }

    html[data-avd-year="2026"] #chart-row #chart-box {
        grid-area: chart;
        height: var(--avd-chart-height);
    }

    html[data-avd-year="2026"] #chart-row #cmp-box {
        grid-area: comparator;
        height: var(--avd-chart-height);
        max-height: var(--avd-chart-height);
    }

    html[data-avd-year="2026"] #chart-row #chart-legend .legend-header {
        flex-wrap: wrap;
        gap: 6px;
    }

    html[data-avd-year="2026"] #chart-row #chart-legend .zones {
        flex-direction: column;
        gap: 2px;
    }

    html[data-avd-year="2026"] #chart-row #chart-legend p {
        font-size: 11px;
        line-height: 1.45;
    }

    /* ===== SEM colaborador: legenda | gráfico (2 colunas) ===== */
    html[data-avd-year="2026"] #chart-row:not(.has-comparator) {
        grid-template-columns: minmax(160px, 186px) minmax(0, 1fr);
        grid-template-rows: var(--avd-chart-height);
        grid-template-areas: "legend chart";
        align-items: start;
        gap: 14px;
    }

    /* ===== COM colaborador: legenda | gráfico | comparador (3 colunas) ===== */
    html[data-avd-year="2026"] #chart-row.has-comparator {
        grid-template-columns: minmax(160px, 186px) minmax(0, 1fr) minmax(300px, 336px);
        grid-template-rows: var(--avd-chart-height);
        grid-template-areas: "legend chart comparator";
        align-items: start;
        height: auto;
        gap: 12px;
    }
}

/* =========================================================
   Estado vazio (busca/filtro sem registros) — discreto e amigável
   ========================================================= */
html[data-avd-year="2026"] .avd-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    margin: 4px 0 0;
    padding: 48px 24px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    color: var(--muted);
}

html[data-avd-year="2026"] .avd-empty .fa-solid {
    margin-bottom: 4px;
    font-size: 24px;
    opacity: .5;
}

html[data-avd-year="2026"] .avd-empty-title {
    margin: 0;
    color: var(--fg-strong);
    font-size: 15px;
    font-weight: 700;
}

html[data-avd-year="2026"] .avd-empty-hint {
    margin: 0;
    font-size: 13px;
}

/* =========================================================
   Comparador por pergunta
   Base (mobile/tablet): flui na página (acordeão), sem scroll interno.
   ========================================================= */
html[data-avd-year="2026"] #cmp-box[hidden] {
    display: none !important;
}

html[data-avd-year="2026"] .cmp-card {
    display: block !important;
    height: auto !important;
    gap: 0;
    overflow: visible !important;
}

html[data-avd-year="2026"] .cmp-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface-2);
}

html[data-avd-year="2026"] .cmp-header-main {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

html[data-avd-year="2026"] .cmp-header-main strong {
    color: var(--fg-strong);
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 0;
}

html[data-avd-year="2026"] .cmp-total,
html[data-avd-year="2026"] .cmp-section-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-3);
    color: var(--fg);
    font-size: 11px;
    font-weight: 750;
}

html[data-avd-year="2026"] .cmp-scope {
    width: 100%;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-blue);
    font-size: 12.5px;
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Seletor "Exibir" — controle único e limpo (sem scroll horizontal de chips).
   Não afeta os filtros principais do dashboard. */
html[data-avd-year="2026"] .cmp-viewpick {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
}

html[data-avd-year="2026"] .cmp-viewpick-label {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    opacity: .9;
}

html[data-avd-year="2026"] #cmpFilterSelect {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--surface);
    color: var(--fg-strong);
    font: inherit;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    /* seta customizada discreta (sem depender do UA) */
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: right 13px center, right 8px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color .15s ease, box-shadow .15s ease;
}

html[data-avd-year="2026"] #cmpFilterSelect:hover {
    border-color: color-mix(in oklab, var(--blue) 40%, var(--border));
}

html[data-avd-year="2026"] #cmpFilterSelect:focus-visible {
    outline: none;
    border-color: color-mix(in oklab, var(--blue) 60%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--blue) 22%, transparent);
}

html[data-avd-year="2026"] #cmp-box .cmp-group {
    min-height: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
}

/* Grupo oculto pelo filtro local */
html[data-avd-year="2026"] #cmp-box .cmp-group[hidden] {
    display: none;
}

/* Cabeçalho de grupo: rótulo visual, NÃO clicável (sem cara de acordeão) */
html[data-avd-year="2026"] #cmp-box .cmp-group-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--hairline);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* contagem do grupo: discreta, com ponto separador desenhado em CSS
   (evita que um middot pareça um sinal de menos no cabeçalho maiúsculo) */
html[data-avd-year="2026"] #cmp-box .cmp-group-head .cmp-section-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
}

html[data-avd-year="2026"] #cmp-box .cmp-group-head .cmp-section-count::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .6;
}

html[data-avd-year="2026"] #cmp-box .cmp-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    margin: 0;
    overflow: visible;
    /* FASE 1-B — neutraliza o cap legado `.cmp-list { max-height: 190px }`
       (responsive.css @864, herança do 2025 que rola internamente). No 2026 o
       ÚNICO container rolável é o #cmp-box; a lista cresce com o conteúdo. Sem
       isto, os itens (agora em altura real) transbordariam os 190px e o próximo
       grupo se sobreporia. Escopado ao 2026 (id na especificidade vence o legado). */
    max-height: none;
}

/* Item = linha/índice clicável. A leitura completa acontece no modal. */
html[data-avd-year="2026"] .cmp-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

html[data-avd-year="2026"] .cmp-item:hover {
    border-color: color-mix(in oklab, var(--blue) 40%, var(--border));
    background: var(--surface-3);
    box-shadow: var(--shadow-sm);
}

html[data-avd-year="2026"] .cmp-item:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

/* Linha 1 — número amigável + título (2 linhas no máximo) */
html[data-avd-year="2026"] .cmp-item-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

html[data-avd-year="2026"] .cmp-qnum {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border: 1px solid color-mix(in oklab, var(--blue) 34%, transparent);
    border-radius: 6px;
    background: var(--tint-blue);
    color: var(--ink-blue);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .02em;
}

html[data-avd-year="2026"] .cmp-item-title {
    min-width: 0;
    color: var(--fg-strong);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Linha 2 — notas compactas + delta */
html[data-avd-year="2026"] .cmp-item-scores {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
}

html[data-avd-year="2026"] .cmp-sc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 650;
}

html[data-avd-year="2026"] .cmp-sc b {
    color: var(--fg-strong);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

html[data-avd-year="2026"] .cmp-sc .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

html[data-avd-year="2026"] .cmp-sc .dot-lider {
    background: var(--blue);
}

html[data-avd-year="2026"] .cmp-sc .dot-auto {
    background: var(--orange);
}

html[data-avd-year="2026"] .cmp-delta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-3);
    color: var(--fg-soft);
    font-size: 11.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

html[data-avd-year="2026"] .cmp-delta.pos {
    background: var(--tint-blue);
    border-color: color-mix(in oklab, var(--blue) 30%, transparent);
    color: var(--ink-blue);
}

html[data-avd-year="2026"] .cmp-delta.neg {
    background: var(--tint-red);
    border-color: color-mix(in oklab, var(--red) 34%, transparent);
    color: var(--ink-red);
}

html[data-avd-year="2026"] .cmp-delta.zero {
    background: var(--tint-green);
    border-color: color-mix(in oklab, var(--green) 30%, transparent);
    color: var(--ink-green);
}

html[data-avd-year="2026"] .cmp-delta.na {
    background: var(--surface-3);
    border-style: dashed;
    color: var(--muted);
}

/* Linha 3 — status textual + indicador de justificativa + código técnico */
html[data-avd-year="2026"] .cmp-item-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 11px;
}

html[data-avd-year="2026"] .cmp-status {
    font-weight: 750;
    color: var(--fg-soft);
}

html[data-avd-year="2026"] .cmp-status::after {
    content: "·";
    margin-left: 8px;
    color: var(--muted);
}

html[data-avd-year="2026"] .cmp-status.positive {
    color: var(--ink-blue);
}

html[data-avd-year="2026"] .cmp-status.negative {
    color: var(--ink-red);
}

html[data-avd-year="2026"] .cmp-status.aligned {
    color: var(--ink-green);
}

html[data-avd-year="2026"] .cmp-status.pending {
    color: var(--ink-orange);
}

html[data-avd-year="2026"] .cmp-just {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-weight: 650;
}

html[data-avd-year="2026"] .cmp-just .fa-solid {
    font-size: 11px;
    color: var(--ink-blue);
}

html[data-avd-year="2026"] .cmp-just.is-none .fa-solid {
    color: var(--muted);
    opacity: .55;
}

html[data-avd-year="2026"] .cmp-tech {
    margin-left: auto;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-avd-year="2026"] .cmp-empty {
    margin: 0;
    padding: 16px 12px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

/* (Removido) O comparador NÃO usa mais scroll aninhado por seção.
   O único container rolável é #cmp-box (definido acima). Assim o
   .cmp-card/.cmp-details/.cmp-list nunca criam rolagem dupla nem
   determinam a altura do grid. */

/* =========================================================
   Modal de justificativas
   ========================================================= */
html[data-avd-year="2026"] .question-dialog {
    width: min(860px, calc(100vw - 32px));
    max-height: 78vh;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface);
    color: var(--fg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

html[data-avd-year="2026"] .question-dialog::backdrop {
    background: rgba(5, 8, 16, .6);
    backdrop-filter: blur(6px);
}

html[data-avd-year="2026"] .question-dialog-shell {
    display: flex;
    flex-direction: column;
    max-height: 78vh;
}

html[data-avd-year="2026"] .question-dialog-header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

html[data-avd-year="2026"] .question-dialog-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--ink-blue);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

html[data-avd-year="2026"] .question-dialog-header h2 {
    max-width: 680px;
    margin: 0;
    color: var(--fg-strong);
    font-size: clamp(17px, 1.6vw, 21px);
    font-weight: 780;
    line-height: 1.25;
}

html[data-avd-year="2026"] .question-dialog-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--surface-3);
    color: var(--fg-strong);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

html[data-avd-year="2026"] .question-dialog-close:hover,
html[data-avd-year="2026"] .question-dialog-close:focus-visible {
    border-color: color-mix(in oklab, var(--blue) 50%, var(--border));
    background: var(--tint-blue);
    outline: 3px solid color-mix(in oklab, var(--blue) 25%, transparent);
}

html[data-avd-year="2026"] .question-dialog-content {
    min-height: 0;
    padding: 18px 20px 22px;
    overflow: auto;
    scrollbar-gutter: stable;
}

html[data-avd-year="2026"] .question-dialog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}

html[data-avd-year="2026"] .question-dialog-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--fg);
    font-size: 11.5px;
    font-weight: 700;
}

html[data-avd-year="2026"] .question-dialog-meta .question-code {
    border-color: color-mix(in oklab, var(--blue) 34%, transparent);
    background: var(--tint-blue);
    color: var(--ink-blue);
    font-weight: 850;
}

html[data-avd-year="2026"] .question-dialog-meta .question-tech {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Resumo compacto das notas (uma linha, não cartões enormes) */
html[data-avd-year="2026"] .question-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

html[data-avd-year="2026"] .question-summary .qs-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

html[data-avd-year="2026"] .question-summary .qs-item.leader {
    border-color: color-mix(in oklab, var(--blue) 30%, var(--border));
}

html[data-avd-year="2026"] .question-summary .qs-item.auto {
    border-color: color-mix(in oklab, var(--orange) 30%, var(--border));
}

html[data-avd-year="2026"] .question-summary .qs-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--blue);
}

html[data-avd-year="2026"] .question-summary .qs-item.auto .qs-dot {
    background: var(--orange);
}

html[data-avd-year="2026"] .question-summary .qs-label {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

html[data-avd-year="2026"] .question-summary .qs-item strong {
    color: var(--fg-strong);
    font-size: 18px;
    font-weight: 820;
    font-variant-numeric: tabular-nums;
}

html[data-avd-year="2026"] .question-summary .qs-item.delta.pos strong {
    color: var(--ink-blue);
}

html[data-avd-year="2026"] .question-summary .qs-item.delta.neg strong {
    color: var(--ink-red);
}

html[data-avd-year="2026"] .question-summary .qs-item.delta.zero strong {
    color: var(--ink-green);
}

html[data-avd-year="2026"] .question-summary-note {
    margin: 0 0 18px;
    color: var(--fg-soft);
    font-size: 12.5px;
    font-weight: 600;
}

html[data-avd-year="2026"] .question-summary-note.neg {
    color: var(--ink-red);
}

html[data-avd-year="2026"] .question-summary-note.pos {
    color: var(--ink-blue);
}

html[data-avd-year="2026"] .question-summary-note.zero {
    color: var(--ink-green);
}

html[data-avd-year="2026"] .question-reading-section {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-2);
}

html[data-avd-year="2026"] .question-reading-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

html[data-avd-year="2026"] .question-reading-heading h3 {
    margin: 0;
    color: var(--fg-strong);
    font-size: 21px;
}

html[data-avd-year="2026"] .question-reading-count {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

html[data-avd-year="2026"] .question-reading-tools {
    display: flex;
    align-items: center;
    gap: 10px;
}

html[data-avd-year="2026"] .question-text-size {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid color-mix(in oklab, var(--blue) 34%, transparent);
    border-radius: 9px;
    background: var(--tint-blue);
    color: var(--ink-blue);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

html[data-avd-year="2026"] .question-text-size:hover,
html[data-avd-year="2026"] .question-text-size:focus-visible {
    border-color: color-mix(in oklab, var(--blue) 70%, transparent);
    background: var(--tint-blue-strong);
    outline: 3px solid color-mix(in oklab, var(--blue) 20%, transparent);
}

html[data-avd-year="2026"] .question-comments-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

html[data-avd-year="2026"] .question-comment-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
}

html[data-avd-year="2026"] .question-comment-card.leader {
    box-shadow: inset 3px 0 0 var(--blue);
}

html[data-avd-year="2026"] .question-comment-card.auto {
    box-shadow: inset 3px 0 0 var(--orange);
}

html[data-avd-year="2026"] .question-comment-card header {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: var(--fg-strong);
    font-size: 14px;
}

html[data-avd-year="2026"] .comment-author-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--blue);
}

html[data-avd-year="2026"] .question-comment-card.auto .comment-author-dot {
    background: var(--orange);
}

html[data-avd-year="2026"] .question-comment-card p {
    margin: 0;
    color: var(--fg);
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.68;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

html[data-avd-year="2026"] .question-comment-card p.empty {
    color: var(--muted);
    font-style: italic;
}

html[data-avd-year="2026"] .question-dialog.large-reading .question-comment-card p {
    font-size: clamp(18px, 1.7vw, 22px);
    line-height: 1.78;
}

html[data-avd-year="2026"] .question-zero-note {
    margin: 16px 2px 0;
    padding: 12px 14px;
    border-left: 3px solid var(--orange);
    border-radius: 8px;
    background: var(--tint-orange);
    color: var(--fg);
    font-size: 13px;
    line-height: 1.5;
}

/* =========================================================
   Responsivo — modal e expansão
   ========================================================= */
@media (max-width: 1400px) {
    html[data-avd-year="2026"] .person-result-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    html[data-avd-year="2026"] .question-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 17px;
    }

    html[data-avd-year="2026"] .question-dialog-shell {
        max-height: calc(100dvh - 16px);
    }

    html[data-avd-year="2026"] .question-dialog-header {
        padding: 18px 18px 16px;
    }

    html[data-avd-year="2026"] .question-dialog-content {
        padding: 18px;
    }

    html[data-avd-year="2026"] .question-comments-grid {
        grid-template-columns: 1fr;
    }

    html[data-avd-year="2026"] .question-summary .qs-item {
        flex: 1 1 auto;
        justify-content: center;
    }

    html[data-avd-year="2026"] .question-reading-section {
        padding: 16px;
    }

    html[data-avd-year="2026"] .person-result-card {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html[data-avd-year="2026"] .person-result-owner,
    html[data-avd-year="2026"] .person-result-zone {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    /* FASE 1-B — o item do comparativo é um <button> em flex-column (título +
       notas + rodapé ≈ 94px). A regra global `button { min-height: 44px }`
       (responsive.css @480, alvo de toque) o trava em 44px e o conteúdo
       transborda sobre o item seguinte. Aqui liberamos a altura para crescer
       com o conteúdo — os controles reais (select/input/botões de ação)
       mantêm o alvo de 44px, pois esta exceção é só do .cmp-item. */
    html[data-avd-year="2026"] .cmp-item {
        min-height: auto;
        height: auto;
    }

    html[data-avd-year="2026"] .cmp-item-footer,
    html[data-avd-year="2026"] .question-reading-heading,
    html[data-avd-year="2026"] .question-reading-tools {
        align-items: stretch;
        flex-direction: column;
    }

    html[data-avd-year="2026"] .cmp-open-detail {
        width: 100%;
        justify-content: center;
    }

    html[data-avd-year="2026"] .question-dialog-header h2 {
        font-size: 18px;
    }

    html[data-avd-year="2026"] .person-delta-strip {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[data-avd-year="2026"] .cmp-item,
    html[data-avd-year="2026"] .cmp-open-detail,
    html[data-avd-year="2026"] .sector-card,
    html[data-avd-year="2026"] #tbl .person-row {
        transition: none;
    }
}

/* ==========================================================================
   FASE 2 — refino MOBILE (≤864px), escopado ao ciclo 2026.
   Desktop (≥865px) e ciclo 2025 permanecem intactos.
   ========================================================================== */
@media (max-width: 864px) {

    /* --- 1) Topbar compacta e institucional; título em 1 linha c/ reticências --- */
    html[data-avd-year="2026"] .topbar {
        padding: 8px 14px;
        gap: 8px 12px;
    }

    html[data-avd-year="2026"] .brand {
        flex: 1 1 auto;
        min-width: 0;
        gap: 8px;
    }

    html[data-avd-year="2026"] .logo-anglo {
        height: 30px;
    }

    html[data-avd-year="2026"] .logo-legacy {
        height: 26px;
    }

    /* Uma linha só + reticências (evita estouro ao anexar "— SETOR"). O contexto
       do setor/colaborador segue nos filtros, no botão Setores e no comparativo. */
    html[data-avd-year="2026"] .topbar .brand h1 {
        min-width: 0;
        font-size: 15px;
        line-height: 1.25;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* --- 3) Legenda do gráfico: compacta, zonas em 2 colunas, texto menor --- */
    html[data-avd-year="2026"] #chart-legend {
        padding: 10px 12px;
        gap: 8px 14px;
    }

    html[data-avd-year="2026"] #chart-legend .zones {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px 10px;
        width: 100%;
    }

    html[data-avd-year="2026"] #chart-legend .zones li {
        padding: 3px 6px;
        font-size: 12px;
    }

    html[data-avd-year="2026"] #chart-legend p {
        font-size: 11px;
        line-height: 1.4;
    }

    /* --- 4) REGISTROS em CARDS (sem scroll horizontal; expansão 100% largura) --- */
    /* Some com o texto técnico "Campos: …" (small SEM id); mantém "N setores"
       (small COM id) e evita a sobreposição do cabeçalho do painel. */
    html[data-avd-year="2026"] .panel-header {
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    html[data-avd-year="2026"] .panel-header small:not([id]) {
        display: none;
    }

    /* A moldura da tabela deixa de rolar: os cards fluem na página. */
    html[data-avd-year="2026"] .table-wrap {
        overflow: visible;
        max-height: none;
        border: 0;
        border-radius: 0;
        background: none;
    }

    html[data-avd-year="2026"] #tbl,
    html[data-avd-year="2026"] #tbl tbody,
    html[data-avd-year="2026"] #tbl tr,
    html[data-avd-year="2026"] #tbl td {
        display: block;
        width: auto;
    }

    html[data-avd-year="2026"] #tbl {
        table-layout: auto;
    }

    html[data-avd-year="2026"] #tbl thead {
        display: none;
    }

    /* Cartão do registro (grade 3 col: chips + métricas) */
    html[data-avd-year="2026"] #tbl tbody .person-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px 10px;
        margin: 0 0 10px;
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    html[data-avd-year="2026"] #tbl tbody .person-row.is-selected {
        margin-bottom: 0;
        border-color: color-mix(in oklab, var(--blue) 45%, var(--border));
        border-bottom-color: transparent;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: inset 3px 0 0 var(--blue), var(--shadow-sm);
    }

    /* Nome em destaque (linha inteira, no topo) */
    html[data-avd-year="2026"] #tbl .person-row td.js-person {
        order: 1;
        grid-column: 1 / -1;
        padding: 0;
        border: 0;
        color: var(--fg-strong);
        font-size: 15px;
        font-weight: 800;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Setor como subtítulo discreto (linha inteira) */
    html[data-avd-year="2026"] #tbl .person-row td:nth-child(3) {
        order: 2;
        grid-column: 1 / -1;
        padding: 0;
        border: 0;
        color: var(--muted);
        font-size: 12px;
        font-weight: 650;
    }

    /* Avaliação + Tipo como chips (Tipo ocupa 2 colunas por ser mais largo) */
    html[data-avd-year="2026"] #tbl .person-row td:nth-child(1),
    html[data-avd-year="2026"] #tbl .person-row td:nth-child(2) {
        align-self: center;
        justify-self: start;
        max-width: 100%;
        padding: 4px 10px;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--surface-2);
        color: var(--fg);
        font-size: 11.5px;
        font-weight: 750;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    html[data-avd-year="2026"] #tbl .person-row td:nth-child(1) {
        order: 3;
    }

    html[data-avd-year="2026"] #tbl .person-row td:nth-child(2) {
        order: 4;
        grid-column: span 2;
    }

    /* Métricas P / D / Nota como blocos rotulados */
    html[data-avd-year="2026"] #tbl .person-row td.num {
        padding: 8px 6px;
        border: 0;
        border-radius: 10px;
        background: var(--surface-2);
        text-align: center;
        color: var(--fg-strong);
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }

    html[data-avd-year="2026"] #tbl .person-row td.num::before {
        display: block;
        margin-bottom: 2px;
        color: var(--muted);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    html[data-avd-year="2026"] #tbl .person-row td:nth-child(5) {
        order: 5;
    }

    html[data-avd-year="2026"] #tbl .person-row td:nth-child(5)::before {
        content: "Potencial";
    }

    html[data-avd-year="2026"] #tbl .person-row td:nth-child(6) {
        order: 6;
    }

    html[data-avd-year="2026"] #tbl .person-row td:nth-child(6)::before {
        content: "Desempenho";
    }

    html[data-avd-year="2026"] #tbl .person-row td:nth-child(7) {
        order: 7;
    }

    html[data-avd-year="2026"] #tbl .person-row td:nth-child(7)::before {
        content: "Nota";
    }

    /* Quadrante/conceito: badge em linha inteira */
    html[data-avd-year="2026"] #tbl .person-row td:nth-child(8) {
        order: 8;
        grid-column: 1 / -1;
        padding: 0;
        border: 0;
    }

    /* Linha expandida: colada ao card selecionado, ocupando 100% da largura útil */
    html[data-avd-year="2026"] #tbl .expand-row > td {
        padding: 0;
        border: 0;
    }

    html[data-avd-year="2026"] #tbl .expand-row .expand-wrap {
        margin: 0 0 10px;
        border: 1px solid color-mix(in oklab, var(--blue) 45%, var(--border));
        border-top: 0;
        border-radius: 0 0 var(--radius) var(--radius);
        background: var(--surface-2);
    }

    /* --- 5) Comparativo: EXIBIR com largura útil e toque confortável --- */
    html[data-avd-year="2026"] #cmpFilterSelect {
        height: 40px;
        font-size: 13px;
    }

    /* --- 7) Estado vazio: respiro adequado ao mobile --- */
    html[data-avd-year="2026"] .avd-empty {
        padding: 32px 18px;
    }
}

/* ==========================================================================
   FASE 3 — acabamento fino MOBILE (2026). Backdrop + trava de scroll do drawer,
   polimento do menu de filtros, affordance dos cards, hint do gráfico.
   Tudo escopado ao 2026; desktop (≥865px) e 2025 intactos.
   ========================================================================== */

/* Trava de scroll da página quando o drawer está aberto (classe aplicada por
   main-2026.js só no mobile). Técnica position:fixed + top:-scrollY → sem salto;
   ao fechar, o JS restaura window.scrollTo(scrollY). */
html[data-avd-year="2026"] body.avd-scroll-lock {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
}

/* Backdrop/overlay do drawer (elemento criado por main-2026.js; visibilidade via
   atributo [hidden]). Escurece o conteúdo por trás, mantendo-o sutilmente visível. */
html[data-avd-year="2026"] .avd-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    background: rgba(6, 10, 20, .48);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: avdBackdropIn .18s var(--ease);
}

html[data-avd-year="2026"] .avd-drawer-backdrop:not([hidden]) {
    display: block;
}

@keyframes avdBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 864px) {
    /* Topbar + drawer acima do backdrop quando aberto (backdrop=1100). */
    html[data-avd-year="2026"] .topbar.filters-open {
        z-index: 1200;
    }

    /* --- 2) Drawer de filtros: mais bonito, espaçado e com hierarquia --- */
    html[data-avd-year="2026"] .topbar .filters {
        gap: 12px;
        padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
        border: 1px solid var(--border);
        border-top: 0;
        border-radius: 0 0 18px 18px;
        box-shadow: var(--shadow-lg);
        max-height: min(82vh, 82svh);
    }

    /* Controles com altura confortável de toque e cantos consistentes. */
    html[data-avd-year="2026"] .filters > select,
    html[data-avd-year="2026"] .filters > input,
    html[data-avd-year="2026"] .filters > button,
    html[data-avd-year="2026"] .filters .cycle-picker {
        min-height: 46px;
        border-radius: 12px;
    }

    /* XLSX: botão de ação claro (verde institucional discreto = exportar). */
    html[data-avd-year="2026"] .filters #btnExportXlsx {
        justify-content: center;
        margin-top: 4px;
        border: 1px solid color-mix(in oklab, var(--green) 42%, var(--border));
        background: var(--tint-green);
        color: var(--ink-green);
        font-weight: 800;
    }

    html[data-avd-year="2026"] .filters #btnExportXlsx:hover {
        border-color: color-mix(in oklab, var(--green) 60%, var(--border));
        background: color-mix(in oklab, var(--green) 18%, transparent);
    }

    /* Setores: botão destacado (azul-ghost), centralizado. */
    html[data-avd-year="2026"] .filters #btnBack {
        justify-content: center;
        font-weight: 800;
    }

    /* --- 4) Cards de registro: percepção de clique + contexto da expansão --- */
    html[data-avd-year="2026"] #tbl tbody .person-row {
        position: relative;
        cursor: pointer;
    }

    html[data-avd-year="2026"] #tbl tbody .person-row::after {
        content: "Toque para ver detalhes ▾";
        order: 9;
        grid-column: 1 / -1;
        margin-top: 2px;
        padding-top: 8px;
        border-top: 1px dashed var(--hairline);
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .01em;
    }

    html[data-avd-year="2026"] #tbl tbody .person-row.is-selected::after {
        content: "Toque para recolher ▴";
        color: var(--ink-blue);
        border-top-color: color-mix(in oklab, var(--blue) 30%, var(--hairline));
    }

    /* Eyebrow na expansão: deixa claro de quem são os detalhes. */
    html[data-avd-year="2026"] #tbl .expand-row .expand-wrap::before {
        content: "Detalhes do colaborador selecionado";
        display: block;
        color: var(--ink-blue);
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    /* --- 5) Comparativo: cabeçalho com respiro/hierarquia --- */
    html[data-avd-year="2026"] .cmp-header {
        gap: 8px;
        padding: 12px 14px;
    }

    html[data-avd-year="2026"] .cmp-viewpick {
        margin-top: 8px;
    }

    /* --- 3) Hint discreto do gráfico (visibilidade controlada por JS) --- */
    html[data-avd-year="2026"] .avd-chart-hint {
        margin: 10px 2px 0;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border: 1px dashed var(--border);
        border-radius: 10px;
        background: var(--surface-2);
        color: var(--muted);
        font-size: 12px;
        line-height: 1.4;
    }

    html[data-avd-year="2026"] .avd-chart-hint .fa-solid {
        color: var(--ink-blue);
    }
}

/* Hint nunca visível fora da regra do JS (desktop mantém oculto). */
html[data-avd-year="2026"] .avd-chart-hint[hidden] {
    display: none;
}

/* ==========================================================================
   FASE 4 — refinos finais MOBILE (2026). Topbar mais leve, drawer com cara de
   bottom-sheet, toolbar do gráfico afastada, separação do bloco de delta.
   Escopado ao 2026 + ≤864px; desktop e 2025 intactos.
   ========================================================================== */
@media (max-width: 864px) {

    /* --- 2) Topbar mais leve (mantendo logos/título legíveis e toque dos botões) --- */
    html[data-avd-year="2026"] .topbar {
        padding: 6px 14px;
        gap: 6px 10px;
    }

    html[data-avd-year="2026"] .logo-anglo {
        height: 28px;
    }

    html[data-avd-year="2026"] .logo-legacy {
        height: 24px;
    }

    html[data-avd-year="2026"] .topbar .brand h1 {
        font-size: 14.5px;
    }

    /* --- 3) Drawer com aparência de painel/bottom-sheet: alça + respiro --- */
    html[data-avd-year="2026"] .topbar .filters {
        gap: 12px;
    }

    html[data-avd-year="2026"] .topbar .filters::before {
        content: "";
        align-self: center;
        width: 40px;
        height: 4px;
        margin: 0 0 6px;
        border-radius: 999px;
        background: var(--border);
    }

    /* Seletor EXIBIR do comparativo com alvo de toque pleno (44px) */
    html[data-avd-year="2026"] #cmpFilterSelect {
        height: 44px;
    }

    /* --- 4) Toolbar do gráfico menor e mais afastada (a área segura do plot
       vem do layout.padding aplicado no JS, só no mobile) --- */
    html[data-avd-year="2026"] .chart-toolbar {
        top: 8px;
        right: 8px;
        gap: 6px;
    }

    html[data-avd-year="2026"] .btn-tool {
        padding: 5px 8px;
    }

    /* --- 6) Expansão do card: separação clara do bloco de diferença (delta) --- */
    html[data-avd-year="2026"] .person-delta-strip::before {
        content: "Diferença (Líder − Auto)";
        grid-column: 1 / -1;
        margin-bottom: 2px;
        color: var(--muted);
        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }
}

/* ==========================================================================
   FASE 5 — fullscreen do gráfico, respiro e microinterações (mobile 2026).
   Escopado ao 2026 + ≤864px; desktop e 2025 intactos.
   ========================================================================== */
@media (max-width: 864px) {

    /* --- 3) Tela cheia do gráfico: quadrado, centralizado, não esticado --- */
    html[data-avd-year="2026"] #chart-box:fullscreen,
    html[data-avd-year="2026"] #chart-box:-webkit-full-screen {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: var(--surface);
        border-radius: 0;
    }

    html[data-avd-year="2026"] #chart-box:fullscreen > canvas,
    html[data-avd-year="2026"] #chart-box:-webkit-full-screen > canvas {
        position: static !important;
        inset: auto !important;
        /* quadrado baseado na menor dimensão da viewport → nunca vertical demais */
        width: 90vmin !important;
        height: 90vmin !important;
    }

    /* --- 4/6) Respiro entre blocos e dentro dos cards --- */
    html[data-avd-year="2026"] .wrap {
        gap: 14px;
    }

    html[data-avd-year="2026"] .cards {
        gap: 12px;
    }

    html[data-avd-year="2026"] #tbl tbody .person-row {
        padding: 14px;
    }

    html[data-avd-year="2026"] #cmp-box .cmp-list {
        gap: 10px;
        padding: 12px;
    }

    html[data-avd-year="2026"] .cmp-item {
        padding: 12px 14px;
        transition: transform .14s var(--ease), border-color .16s var(--ease),
            background .16s var(--ease), box-shadow .16s var(--ease);
    }

    /* --- 5) Microinterações de toque (discretas, institucionais) --- */
    html[data-avd-year="2026"] #tbl tbody .person-row {
        transition: transform .14s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
    }

    html[data-avd-year="2026"] .sector-card:active,
    html[data-avd-year="2026"] #tbl tbody .person-row:active,
    html[data-avd-year="2026"] .cmp-item:active {
        transform: scale(.99);
    }

    html[data-avd-year="2026"] .btn-filters:active,
    html[data-avd-year="2026"] #btnLogout:active,
    html[data-avd-year="2026"] .filters #btnExportXlsx:active,
    html[data-avd-year="2026"] .filters #btnBack:active {
        transform: translateY(1px);
    }

    /* Entrada suave do drawer e da expansão do colaborador. */
    html[data-avd-year="2026"] .topbar.filters-open .filters {
        animation: avdDrawerIn .22s var(--ease);
    }

    html[data-avd-year="2026"] .expand-row .expand-wrap {
        animation: avdExpandIn .2s var(--ease);
    }
}

@keyframes avdDrawerIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

@keyframes avdExpandIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* Respeita quem prefere menos movimento. */
@media (prefers-reduced-motion: reduce) {
    html[data-avd-year="2026"] .topbar.filters-open .filters,
    html[data-avd-year="2026"] .expand-row .expand-wrap,
    html[data-avd-year="2026"] .avd-drawer-backdrop {
        animation: none;
    }

    html[data-avd-year="2026"] .sector-card:active,
    html[data-avd-year="2026"] #tbl tbody .person-row:active,
    html[data-avd-year="2026"] .cmp-item:active,
    html[data-avd-year="2026"] .btn-filters:active,
    html[data-avd-year="2026"] #btnLogout:active {
        transform: none;
    }
}

/* ==========================================================================
   FASE 6 — UX final mobile (2026): comparativo sem scroll interno, ícone de
   tema (sol/lua), separação de blocos e respiro. Escopado 2026 + ≤864px.
   ========================================================================== */
@media (max-width: 864px) {

    /* --- 1) Comparativo SEM scroll interno: a página é a rolagem principal --- */
    html[data-avd-year="2026"] #cmp-box {
        max-height: none;
        height: auto;
        overflow: visible;
        margin-top: 4px;
    }

    /* Sem scroll interno, o cabeçalho fixo (sticky) grudaria atrás da topbar —
       torna estático no mobile. */
    html[data-avd-year="2026"] #cmp-box .cmp-header {
        position: static;
    }

    /* --- 4) Ícone de tema mais claro: no modo "Sistema" (fa-desktop) mostra
       sol/lua conforme o tema resolvido. Só apresentação; lógica intacta.
       (2025 e login mantêm o comportamento atual, pois não têm este escopo.) --- */
    html[data-avd-year="2026"][data-theme="light"] .theme-toggle__icon.fa-desktop::before {
        content: "\f185"; /* fa-sun */
    }

    html[data-avd-year="2026"][data-theme="dark"] .theme-toggle__icon.fa-desktop::before {
        content: "\f186"; /* fa-moon */
    }

    /* --- 5) Respiro do comparativo e separação de Registros --- */
    html[data-avd-year="2026"] #cmp-box .cmp-group-head {
        padding: 9px 14px;
    }

    html[data-avd-year="2026"] .cmp-item-scores {
        gap: 8px 14px;
    }

    html[data-avd-year="2026"] .cmp-item-foot {
        gap: 6px 10px;
    }

    /* --- 3) Fullscreen do gráfico: card centralizado com respiro --- */
    html[data-avd-year="2026"] #chart-box:fullscreen,
    html[data-avd-year="2026"] #chart-box:-webkit-full-screen {
        padding: 16px;
    }
}

/* ==========================================================================
   MOBILE 2026 DEFINITIVO
   --------------------------------------------------------------------------
   Base limpa que VENCE e organiza as regras mobile das Fases 1–6. Escopada a
   html[data-avd-year="2026"] + ≤864px. Desktop (≥865px) e ciclo 2025 intactos.
   Neutraliza:
     • Fase 1-A: .wrap { padding-top: calc(--topbar-h + 12px) } → topbar agora é
       STICKY (participa do fluxo), então o offset calculado não é mais preciso.
     • Regressão anterior do gráfico: NÃO se mexe mais em position/inset/width/
       height do <canvas>. O canvas fica 100% sob controle do Chart.js (home.css:
       absolute; inset:0; 100%/100%) → escala 0–4 inteira, sem corte/zoom. A
       toolbar é MOVIDA por JS para o cabeçalho do card (fora da área do canvas).
   ========================================================================== */
@media (max-width: 864px) {

    /* (1) TOPBAR STICKY — nada de conteúdo atrás da topbar, sem padding calculado. */
    html[data-avd-year="2026"] .topbar {
        position: sticky;
        top: 0;
    }

    html[data-avd-year="2026"] .wrap {
        padding-top: 14px;
    }

    /* (3) GRÁFICO — a toolbar (movida por JS) vive no CABEÇALHO do card, à direita
       do título, FORA da área do canvas. O #chart-box contém só o canvas. */
    html[data-avd-year="2026"] .panel-header {
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    html[data-avd-year="2026"] .panel-header .chart-toolbar {
        position: static;
        display: inline-flex;
        gap: 8px;
        margin-left: auto;
        flex: 0 0 auto;
    }

    /* (4) KPIs — alinhamento consistente dos boxes P·D·Nota nos 4 cards.
       Cada box é uma coluna flex: rótulo no topo, valor na base → os três valores
       ficam sempre na MESMA base. Inerte nos cards LÍDER/AUTO (rótulos de 1 linha
       → boxes de mesma altura). Não toca em cálculo, escala nem gráfico. */
    html[data-avd-year="2026"] .kpi-grid .k {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 2px;
    }

    html[data-avd-year="2026"] .kpi-grid .k .t {
        line-height: 1.15;
    }

    /* (4b) Card "Δ médio (L−A)" — o título do card já informa que são deltas,
       então NO MOBILE os rótulos internos viram P / D / Nota (sem o "Δ "). Assim
       "Nota" cabe em UMA linha e o card fica com a mesma altura do card AUTO ao
       lado (todos os boxes de 1 linha). Só troca de APRESENTAÇÃO do rótulo, via
       CSS, escopada ao card Δ (:last-child) + ≤864px: o texto original ("Δ P" etc.,
       preservado no HTML para o desktop) é ocultado e o rótulo curto entra por
       ::before. Não altera cálculo, dado, delta, escala nem os cards LÍDER/AUTO. */
    html[data-avd-year="2026"] .cards .card.kpi-block:last-child .kpi-grid .k .t {
        font-size: 0;               /* esconde o "Δ X" original sem removê-lo do HTML */
        white-space: nowrap;
    }

    html[data-avd-year="2026"] .cards .card.kpi-block:last-child .kpi-grid .k .t::before {
        font-size: 11.5px;          /* rótulo curto legível, em 1 linha */
        color: var(--muted);
        white-space: nowrap;
    }

    html[data-avd-year="2026"] .cards .card.kpi-block:last-child .kpi-grid .k:nth-child(1) .t::before {
        content: "P";
    }

    html[data-avd-year="2026"] .cards .card.kpi-block:last-child .kpi-grid .k:nth-child(2) .t::before {
        content: "D";
    }

    html[data-avd-year="2026"] .cards .card.kpi-block:last-child .kpi-grid .k:nth-child(3) .t::before {
        content: "Nota";
    }
}

/* ==========================================================================
   TELA CHEIA DO GRÁFICO — OVERLAY MOBILE (2026)
   --------------------------------------------------------------------------
   O Fullscreen API nativo estica o canvas no celular. No mobile, o botão de
   tela cheia abre este overlay próprio (JS move o #chart-box para o "palco"
   quadrado). Inerte até .is-open. Desktop segue com fullscreen nativo.
   ========================================================================== */
html[data-avd-year="2026"] #avdChartFs {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    flex-direction: column;
    background: var(--surface);
}

html[data-avd-year="2026"] #avdChartFs.is-open {
    display: flex;
}

html[data-avd-year="2026"] #avdChartFs .avd-fs-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}

html[data-avd-year="2026"] #avdChartFs .avd-fs-header h3 {
    margin: 0;
    min-width: 0;
    color: var(--fg-strong);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-avd-year="2026"] #avdChartFs .avd-fs-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

html[data-avd-year="2026"] #avdChartFs .avd-fs-actions .btn-tool {
    position: static;
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

html[data-avd-year="2026"] #avdChartFs .avd-fs-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}

/* Palco quadrado, confortável e estável (não estica vertical). */
html[data-avd-year="2026"] #avdChartFs .avd-fs-stage {
    width: min(92vw, 560px);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 100%;
}

/* O #chart-box (movido para cá) preenche o palco; o canvas do Chart.js segue
   absoluto (inset:0) do home.css e renderiza a escala 0–4 completa. */
html[data-avd-year="2026"] #avdChartFs #chart-box {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* ==========================================================================
   GRÁFICO 2026 — toolbar no cabeçalho em TODA largura (Etapa 3-A)
   --------------------------------------------------------------------------
   O JS (placeChartToolbar) agora move a .chart-toolbar para o cabeçalho do card
   do gráfico também no DESKTOP (antes ela ficava absoluta sobre o canvas). Estas
   regras — antes só em @media ≤864 — passam a valer em qualquer largura, restritas
   ao card do gráfico via :has(.chart-toolbar) (não afetam outros cabeçalhos). Em
   tela cheia nativa a toolbar volta ao #chart-box e a regra base (position:absolute)
   volta a valer; o overlay do mobile tem ações próprias. Só apresentação; escala
   0–4, cálculo e dados inalterados. O .btn-tool do 2026 já é theme-aware.
   ========================================================================== */
html[data-avd-year="2026"] .panel-header:has(.chart-toolbar) {
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
}

html[data-avd-year="2026"] .panel-header:has(.chart-toolbar) h2 {
    min-width: 0;
}

html[data-avd-year="2026"] .panel-header .chart-toolbar {
    position: static;
    display: inline-flex;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

/* ==========================================================================
   TOPBAR MOBILE 2026 — botão "Setores" FORA do drawer (Etapa 3-B)
   --------------------------------------------------------------------------
   Paridade com o 2025. O JS (placeBackButton) move o #btnBack para a
   .topbar-actions quando há drawer (≤1099px) e o devolve à barra de filtros no
   desktop. Visibilidade por .show-people (regra global). Escopado a 2026.
   ========================================================================== */
@media (max-width: 1099px) {
    html[data-avd-year="2026"]:not(.show-people) .topbar-actions #btnBack {
        display: none !important;
    }

    html[data-avd-year="2026"] .topbar-actions #btnBack {
        min-height: 44px;
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 864px) {
    html[data-avd-year="2026"] .topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

/* =========================================================
   ETAPA 5-B — Identidade institucional SUAVIZADA (SOMENTE 2026.1)
   Substitui a 5-A (que deixou a home com excesso de linhas azuis). Agora o azul
   institucional aparece sobretudo em HOVER/FOCUS/seção ativa e num marcador
   discreto de título; KPIs e cards de setor NÃO têm mais linha azul permanente.
   Escopo html[data-avd-year="2026"]; tokens de marca do theme.css. --brand-ink
   adapta por tema (#005490 claro / #32a2db escuro). NÃO altera cores Líder/Auto
   (--blue/--orange), gráfico, escala 0–4, XLSX nem nada do ciclo 2025.
   Reversível: bloco contíguo até o fim do arquivo. Só apresentação.
   ========================================================= */

/* 1) Título de painel: único acento institucional permanente (pequeno, por
   painel). A divisória do header fica NEUTRA (sem azul), reduzindo o "azul em
   tudo". */
html[data-avd-year="2026"] .panel-header {
    border-bottom: 1px solid var(--hairline);
}

html[data-avd-year="2026"] .panel-header h2 {
    padding-left: 9px;
    border-left: 2px solid color-mix(in oklab, var(--brand-ink) 60%, transparent);
    line-height: 1.15;
}

/* 2) KPIs: SEM linha azul permanente (removido o inset da 5-A). Cabeçalhos
   voltam à cor neutra forte — o Δ médio mantém sua tinta pela regra base. */
html[data-avd-year="2026"] .card.kpi-block {
    box-shadow: var(--shadow-sm);
}

html[data-avd-year="2026"] .card .kpi-head {
    color: var(--fg-strong);
}

/* 3) Cards de setor: SEM acento superior permanente. Azul institucional apenas
   no hover/focus, discreto (borda suave, sem barra neon). Linhas L/A intactas. */
html[data-avd-year="2026"] .sector-card {
    box-shadow: var(--shadow-sm);
}

html[data-avd-year="2026"] .sector-card:hover,
html[data-avd-year="2026"] .sector-card:focus-visible {
    border-color: color-mix(in oklab, var(--brand-detail) 40%, var(--border));
    box-shadow: var(--shadow-md);
}

/* 4) Tabela: divisória suave sob o cabeçalho (quase neutra, leve tom de marca) */
html[data-avd-year="2026"] #tbl thead th {
    border-bottom: 1px solid color-mix(in oklab, var(--brand-ink) 18%, var(--border));
}

/* 5) Comparativo: assinatura lateral fina e discreta (reduzida da 5-A) */
html[data-avd-year="2026"] .cmp-header {
    box-shadow: inset 2px 0 0 0 color-mix(in oklab, var(--brand-ink) 45%, transparent);
}

/* 6) Rodapé 2026: cor institucional discreta (texto do app.js permanece intacto) */
html[data-avd-year="2026"] .foot {
    color: var(--brand-footer);
}

/* 7) Tema ESCURO: baixa a intensidade dos acentos (evita efeito neon do
   #32a2db). Só reduz saturação/opacidade — nada estrutural. */
html[data-avd-year="2026"][data-theme="dark"] .panel-header h2 {
    border-left-color: color-mix(in oklab, var(--brand-ink) 42%, transparent);
}

html[data-avd-year="2026"][data-theme="dark"] .sector-card:hover,
html[data-avd-year="2026"][data-theme="dark"] .sector-card:focus-visible {
    border-color: color-mix(in oklab, var(--brand-detail) 28%, var(--border));
}

html[data-avd-year="2026"][data-theme="dark"] #tbl thead th {
    border-bottom-color: color-mix(in oklab, var(--brand-ink) 12%, var(--border));
}

html[data-avd-year="2026"][data-theme="dark"] .cmp-header {
    box-shadow: inset 2px 0 0 0 color-mix(in oklab, var(--brand-ink) 30%, transparent);
}

/* =========================================================
   ETAPA 5-C REAL — Camada institucional PERCEPTÍVEL (SOMENTE 2026.1)
   Substitui a 5-C discreta demais. Reforça a presença da marca via FUNDO/
   COMPOSIÇÃO (não via bordas em cards): (1) atmosfera institucional visível no
   body (2 radiais, sem imagem); (2) linha em degradê no topo dos 3 painéis
   principais; (3) marcador de título composto AZUL+DOURADO nos cabeçalhos. KPIs
   e cards de setor seguem LIMPOS (herdam a 5-B — sem borda azul permanente).
   Escopo html[data-avd-year="2026"]; NÃO altera cores Líder/Auto, zonas/escala
   0–4 do gráfico, tabela, XLSX nem o 2025. Reversível: bloco até o fim.
   ========================================================= */

/* Token de dourado (Legacy) restrito ao ciclo 2026 — não vaza para o 2025. */
html[data-avd-year="2026"] {
    --brand-gold: #c9a227;
}

/* 1) Fundo do dashboard: atmosfera institucional PERCEPTÍVEL, porém suave (sem
   imagem). A cor base --bg (background-color do theme.css) permanece; só
   sobrepomos radiais. Os painéis são opacos (--surface), então a leitura dos
   dados não é afetada. Claro: azul institucional muito claro como atmosfera. */
html[data-avd-year="2026"] body {
    background-image:
        radial-gradient(1200px 640px at 92% -10%,
            color-mix(in oklab, var(--brand-detail) 20%, transparent),
            transparent 58%),
        radial-gradient(1000px 560px at -6% 112%,
            color-mix(in oklab, var(--brand) 12%, transparent),
            transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Escuro: brilho radial azul discreto (navy predominante evita neon). */
html[data-avd-year="2026"][data-theme="dark"] body {
    background-image:
        radial-gradient(1200px 640px at 90% -12%,
            color-mix(in oklab, var(--brand-detail) 16%, transparent),
            transparent 60%),
        radial-gradient(1100px 620px at -6% 112%,
            color-mix(in oklab, var(--brand) 34%, transparent),
            transparent 62%);
}

/* 2) Painéis PRINCIPAIS (.panel): linha em degradê no topo, com remate dourado.
   NÃO afeta .cards/.card.kpi-block/.sector-card. */
html[data-avd-year="2026"] .panel {
    position: relative;
}

html[data-avd-year="2026"] .panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--radius) var(--radius) 0 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--brand-ink) 80%, transparent) 0%,
        color-mix(in oklab, var(--brand-detail) 52%, transparent) 30%,
        color-mix(in oklab, var(--brand-gold) 55%, transparent) 55%,
        transparent 80%);
}

/* Escuro: reduz intensidade da linha (evita neon e dourado forte). */
html[data-avd-year="2026"][data-theme="dark"] .panel::before {
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--brand-ink) 48%, transparent) 0%,
        color-mix(in oklab, var(--brand-detail) 30%, transparent) 30%,
        color-mix(in oklab, var(--brand-gold) 32%, transparent) 55%,
        transparent 80%);
}

/* 3) Cabeçalhos de painel: marcador vertical COMPOSTO azul (topo) + dourado
   (base) — substitui o border-left simples da 5-B por algo mais evidente e
   elegante. Só nos títulos dos painéis principais. */
html[data-avd-year="2026"] .panel-header h2 {
    border-left: 0;
    padding-left: 13px;
    position: relative;
}

html[data-avd-year="2026"] .panel-header h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.05em;
    border-radius: 2px;
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--brand-ink) 88%, transparent) 0%,
        color-mix(in oklab, var(--brand-ink) 88%, transparent) 60%,
        color-mix(in oklab, var(--brand-gold) 85%, transparent) 61%,
        color-mix(in oklab, var(--brand-gold) 85%, transparent) 100%);
}

/* Escuro: baixa a saturação do marcador (anti-neon). */
html[data-avd-year="2026"][data-theme="dark"] .panel-header h2::before {
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--brand-ink) 60%, transparent) 0%,
        color-mix(in oklab, var(--brand-ink) 60%, transparent) 60%,
        color-mix(in oklab, var(--brand-gold) 55%, transparent) 61%,
        color-mix(in oklab, var(--brand-gold) 55%, transparent) 100%);
}

/* ==========================================================================
   ETAPA 5-D — camada decorativa institucional suave somente 2026.1
   --------------------------------------------------------------------------
   Atmosfera institucional PERCEPTÍVEL pintada no background do body (que se
   propaga para toda a viewport, inclusive nas áreas entre/abaixo dos painéis),
   com background-attachment: fixed. É puramente fundo: os painéis são opacos
   (--surface), então gráfico, tabela, cards, textos e o <dialog> de
   justificativa (top layer) ficam sempre por cima e 100% legíveis. Composição:
   orbs azul institucional nos cantos + um orb dourado discreto (Legacy). NÃO
   altera layout/altura, cores Líder/Auto, zonas/escala do gráfico, XLSX, rodapé
   nem o 2025. Substitui o background da 5-C (mais rico). Escopo
   html[data-avd-year="2026"]. Reversível: remover deste comentário até o fim.
   NOTA: pseudo-elementos fixos em z-index negativo ficavam ATRÁS do fundo opaco
   do canvas (invisíveis); por isso a camada vive no background do body.
   ========================================================================== */

/* Tema CLARO — atmosfera azul institucional muito clara + toque dourado. */
html[data-avd-year="2026"] body {
    background-image:
        radial-gradient(920px 640px at 97% -8%,
            color-mix(in oklab, var(--brand-detail) 26%, transparent), transparent 58%),
        radial-gradient(840px 620px at -8% 108%,
            color-mix(in oklab, var(--brand) 17%, transparent), transparent 60%),
        radial-gradient(520px 420px at 8% 4%,
            color-mix(in oklab, var(--brand-detail) 12%, transparent), transparent 62%),
        radial-gradient(460px 380px at 90% 94%,
            color-mix(in oklab, var(--brand-gold) 13%, transparent), transparent 64%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Tema ESCURO — navy elegante, um pouco mais visível, sem neon (usa um brilho
   azul-claro moderado + navy amplo + orb dourado discreto). */
html[data-avd-year="2026"][data-theme="dark"] body {
    background-image:
        radial-gradient(1000px 680px at 97% -10%,
            color-mix(in oklab, var(--brand-detail) 20%, transparent), transparent 60%),
        radial-gradient(920px 660px at -8% 110%,
            color-mix(in oklab, var(--brand) 52%, transparent), transparent 62%),
        radial-gradient(560px 460px at 8% 4%,
            color-mix(in oklab, var(--brand-detail) 12%, transparent), transparent 64%),
        radial-gradient(480px 400px at 90% 94%,
            color-mix(in oklab, var(--brand-gold) 15%, transparent), transparent 64%);
}

/* ==========================================================================
   ETAPA 5-H — camada decorativa institucional orgânica (somente 2026.1)
   --------------------------------------------------------------------------
   SUBSTITUI a 5-G (não empilha). Fundo orgânico, acolhedor e elegante, só CSS:
   (a) "ilhas de luz" GRANDES e muito difusas (baixa opacidade) que dão
   profundidade sem parecer mancha — ancoradas nos vazios e bordas; (b) poucos
   mini-anéis vazados (círculos ocos finos via radial-gradient) discretos; (c)
   poucos pontos pequenos, distribuição irregular mas controlada. SEM
   linear-gradient (nenhum fio/linha diagonal), SEM orbs pequenos de opacidade
   alta (sujeira), SEM orb dourado grande. Tudo no background do body
   (background-attachment: fixed); pseudo fixo em z-index negativo sumia atrás
   do canvas opaco (ver 5-D). Painéis opacos cobrem a área de leitura — a
   decoração aparece sobretudo no espaço vazio. NÃO altera clique/scroll/modal,
   layout, cores Líder/Auto, gráfico, escala, XLSX nem o 2025. Escopo
   html[data-avd-year="2026"]. Remover o bloco restaura a 5-D. Os toques das
   etapas anteriores (linha degradê nos painéis, marcador de título azul/dourado)
   permanecem em seus próprios blocos e complementam esta camada.
   ========================================================================== */

/* Tema CLARO — orgânico e limpo: ilhas de luz difusas + mini-anéis + poucos
   pontos. Sem fios, sem manchas, sem sujeira. */
html[data-avd-year="2026"] body {
    background-image:
        /* mini-anéis vazados (círculos ocos finos), discretos */
        radial-gradient(circle at 16% 80%, transparent 6.5px, color-mix(in oklab, var(--brand-detail) 22%, transparent) 6.5px, color-mix(in oklab, var(--brand-detail) 22%, transparent) 8px, transparent 8px),
        radial-gradient(circle at 85% 73%, transparent 8px, color-mix(in oklab, var(--brand-detail) 18%, transparent) 8px, color-mix(in oklab, var(--brand-detail) 18%, transparent) 9.5px, transparent 9.5px),
        radial-gradient(circle at 66% 91%, transparent 5.5px, color-mix(in oklab, var(--brand-gold) 20%, transparent) 5.5px, color-mix(in oklab, var(--brand-gold) 20%, transparent) 7px, transparent 7px),
        /* poucos pontos pequenos, irregulares (1 dourado) */
        radial-gradient(circle at 8% 24%, color-mix(in oklab, var(--brand-detail) 22%, transparent) 0 1.3px, transparent 2.4px),
        radial-gradient(circle at 5% 63%, color-mix(in oklab, var(--brand-detail) 20%, transparent) 0 1.3px, transparent 2.4px),
        radial-gradient(circle at 28% 86%, color-mix(in oklab, var(--brand-detail) 20%, transparent) 0 1.3px, transparent 2.4px),
        radial-gradient(circle at 90% 33%, color-mix(in oklab, var(--brand-gold) 18%, transparent) 0 1.3px, transparent 2.4px),
        radial-gradient(circle at 78% 58%, color-mix(in oklab, var(--brand-detail) 18%, transparent) 0 1.3px, transparent 2.4px),
        /* ilhas de luz grandes e muito difusas (profundidade, não mancha) */
        radial-gradient(1200px 900px at 80% 120%, color-mix(in oklab, var(--brand-detail) 11%, transparent), transparent 60%),
        radial-gradient(1100px 840px at 10% 128%, color-mix(in oklab, var(--brand) 8%, transparent), transparent 62%),
        radial-gradient(1000px 780px at 110% 34%, color-mix(in oklab, var(--brand-detail) 8%, transparent), transparent 60%),
        radial-gradient(950px 720px at 46% -20%, color-mix(in oklab, var(--brand-gold) 5%, transparent), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* Tema ESCURO — mesmo desenho, com um pouco mais de personalidade; navy suave,
   sem neon, sem brilho forte. */
html[data-avd-year="2026"][data-theme="dark"] body {
    background-image:
        radial-gradient(circle at 16% 80%, transparent 6.5px, color-mix(in oklab, var(--brand-detail) 34%, transparent) 6.5px, color-mix(in oklab, var(--brand-detail) 34%, transparent) 8px, transparent 8px),
        radial-gradient(circle at 85% 73%, transparent 8px, color-mix(in oklab, var(--brand-detail) 28%, transparent) 8px, color-mix(in oklab, var(--brand-detail) 28%, transparent) 9.5px, transparent 9.5px),
        radial-gradient(circle at 66% 91%, transparent 5.5px, color-mix(in oklab, var(--brand-gold) 30%, transparent) 5.5px, color-mix(in oklab, var(--brand-gold) 30%, transparent) 7px, transparent 7px),
        radial-gradient(circle at 8% 24%, color-mix(in oklab, var(--brand-detail) 34%, transparent) 0 1.3px, transparent 2.4px),
        radial-gradient(circle at 5% 63%, color-mix(in oklab, var(--brand-detail) 30%, transparent) 0 1.3px, transparent 2.4px),
        radial-gradient(circle at 28% 86%, color-mix(in oklab, var(--brand-detail) 30%, transparent) 0 1.3px, transparent 2.4px),
        radial-gradient(circle at 90% 33%, color-mix(in oklab, var(--brand-gold) 28%, transparent) 0 1.3px, transparent 2.4px),
        radial-gradient(circle at 78% 58%, color-mix(in oklab, var(--brand-detail) 28%, transparent) 0 1.3px, transparent 2.4px),
        radial-gradient(1250px 920px at 80% 122%, color-mix(in oklab, var(--brand-detail) 12%, transparent), transparent 62%),
        radial-gradient(1150px 860px at 10% 130%, color-mix(in oklab, var(--brand) 34%, transparent), transparent 64%),
        radial-gradient(1050px 800px at 110% 34%, color-mix(in oklab, var(--brand-detail) 10%, transparent), transparent 62%),
        radial-gradient(980px 740px at 46% -20%, color-mix(in oklab, var(--brand-gold) 7%, transparent), transparent 60%);
}