:root {
    --primary-color:var(--acento-texto);
    --accent-color:var(--acento-texto);
    --bg-light:var(--fundo);
    --card-bg:var(--superficie);
    --text-primary:var(--texto);
    --text-secondary:var(--texto-2);
    --border-color:var(--borda);
    --shadow-sm:0 1px 2px 0 var(--sombra);
    --neutral-bar:var(--azul);
    --reference-color:var(--acento);
    --benchmark-line:var(--borda-forte);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fonte);
    background-color: var(--bg-light);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Header Styling */
.main-header {
    background-color: var(--superficie);
    padding: 0 40px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
    height: 80px;
}

.logo-container .logo {
    height: 62.5px;
    object-fit: contain;
}

.title-container h1 {
    font-size: 19px;
    font-weight: 800;
    color: var(--texto);
    letter-spacing: -0.025em;
    text-transform: uppercase;
    line-height: 1;
}

/* Navigation Styling */
.main-nav {
    display: flex;
    gap: 32px;
}

.nav-btn {
    background: none;
    border: none;
    padding: 16px 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    /* For link version */
    display: inline-block;
}

.nav-btn:hover {
    color: var(--primary-color);
}

.nav-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 700;
}

/* Nav + controle de normalização na mesma linha */
.header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Controle de reajuste (IPCA/IGP-DI + mês) — mesmo estilo dos pills
   "TODOS OS ATIVOS" (.btn-todos-ativos) e "Concessões de Referência" (.btn-referencia) */
.norm-control {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    top: 4px;
}
.norm-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    white-space: nowrap;
    line-height: 1.15;
    text-align: center;
}
/* botões IPCA / IGP-DI e o card de mês compartilham a aparência do pill */
.norm-idx-btn,
.norm-month-wrapper .multi-select-display {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 32px;
    padding: 6px 12px 6px 16px;
    background-color: var(--acento-sutil);
    border: 1.5px solid var(--acento);
    border-radius: 10px;
    box-shadow: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--texto-2);
    cursor: pointer;
    white-space: nowrap;
    flex-wrap: nowrap;
    transition: all 0.2s ease;
}
.norm-idx-btn:hover,
.norm-month-wrapper .multi-select-display:hover {
    background-color: var(--acento-sutil);
    border-color: var(--acento);
}
.norm-idx-btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--texto-invertido);
}
/* Botão "Indicadores por KM" (abaixo de Concessões de Referência) — estilo próprio
   (NÃO usar .norm-idx-btn: aquela classe tem handler de reajuste que prende o 'active') */
/* coluna que empilha os botões de KM / Ano (abaixo de Concessões de Referência) */
.km-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}
.km-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;     /* texto centralizado */
    gap: 8px;
    min-height: 40px;            /* levemente mais alto */
    padding: 10px 16px;
    background-color: transparent;   /* DESMARCADO = SÓ A BORDA (sem preenchimento) */
    border: 1.5px solid var(--ambar);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ambar-texto);             /* texto âmbar escuro (legível no amarelo) */
    cursor: pointer;
    white-space: normal;        /* permite quebrar rótulos longos (ex.: o do CAPEX Segmentado) */
    text-align: center;
    line-height: 1.25;
    transition: all 0.2s ease;
}
.km-toggle-btn:hover {
    background-color: color-mix(in srgb, var(--ambar) 30%, var(--superficie));   /* hover do desmarcado: leve preenchimento (dica de clique) */
    border-color: var(--ambar);
}
.km-toggle-btn.active {          /* MARCADO = amarelo forte */
    background-color: color-mix(in srgb, var(--ambar) 30%, var(--superficie));
    border-color: var(--ambar);
    color: var(--texto);
}
/* Tooltip do modo KM (valor original + extensão) */
.km-tooltip {
    position: fixed;
    z-index: 9999;
    background: var(--texto);
    color: var(--texto-invertido);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.55;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--texto) 28%, transparent);
    pointer-events: none;
    max-width: 280px;
}
.km-tooltip b { color: var(--texto-invertido); }
.km-tooltip > b { display: block; margin-bottom: 3px; font-size: 12.5px; }
/* texto do mês: mesma fonte/negrito/cor/tamanho do pill */
#norm-selected-text {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--texto-2);
    flex: 0 0 auto;
}
.norm-month-wrapper {
    position: relative;
}
.norm-month-wrapper .arrow {
    font-size: 9px;
    color: var(--texto-2);
}
/* dropdown: herda visual de .multi-select-dropdown; só reposiciona à direita */
#norm-dropdown {
    left: auto;
    right: 0;
    width: auto;
    min-width: 170px;
    max-height: 340px;
}
#norm-dropdown.open {
    display: block;
}

/* Filter Section Styling */
.filter-section {
    padding: 24px 40px;
    background-color: var(--bg-light);
}

.filter-grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    /* lg:grid-cols-4 */
    gap: 24px;
    max-width: 1800px;
    margin: 0 auto;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    display: block;
}

.comparison-filter .filter-title {
    color: var(--texto-3);
    /* Slate-400 equivalent */
}

.multi-select-wrapper {
    position: relative;
    width: 100%;
}

.multi-select-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: var(--superficie);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    min-height: 48px;
    height: auto;
    flex-wrap: wrap;
}

.multi-select-display:hover {
    border-color: var(--primary-color);
}

.multi-select-display.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento-forte) 10%, transparent);
}

.multi-select-display .selected-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.multi-select-display .arrow {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.multi-select-display.active .arrow {
    transform: rotate(180deg);
}

.comparison-filter .arrow,
.reference-filter .arrow {
    display: none;
}

.multi-select-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background-color: var(--superficie);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--texto) 8%, transparent);
    display: none;
    z-index: 1000;
    padding: 8px;
}

.multi-select-wrapper {
    position: relative;
    width: 100%;
}

.multi-select-dropdown.show {
    display: block;
    animation: slideDown 0.2s ease-out;
}

/* Forçar abertura logo abaixo da primeira linha de tags (~52px) */
.force-top-dropdown .multi-select-dropdown {
    top: 52px !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.option-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.option-item:hover,
.option-item.selected {
    background-color: var(--fundo);
}

.option-item.selected {
    color: var(--primary-color);
    font-weight: 700;
}

.option-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--borda);
    border-radius: 4px;
    cursor: pointer;
}

.option-item label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    flex: 1;
}

/* Selected Tags Styling */
.selected-tags-container {
    display: flex;
    flex-wrap: wrap;
    /* Ensure tags wrap within the display if needed */
    gap: 6px;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    margin-top: 12px;
    min-height: 24px;
}

.selected-tags-container::-webkit-scrollbar {
    display: none;
}

.comparison-filter .multi-select-display,
.reference-filter .multi-select-display {
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 12px;
    cursor: default;
}

.btn-todos-ativos {
    display: inline-flex;
    align-items: center;
    background-color: var(--acento-sutil);
    color: var(--texto-2);
    border: 1.5px solid var(--acento);
    padding: 6px 12px 6px 16px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.1em;
    min-height: 32px;
}

.btn-todos-ativos:hover {
    background-color: var(--acento-sutil);
    border-color: var(--acento);
}

.btn-referencia {
    display: inline-flex;
    align-items: center;
    background-color: var(--acento-sutil);
    color: var(--texto-2);
    border: 1.5px solid var(--acento);
    padding: 6px 12px 6px 16px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.1em;
    min-height: 32px;
}

.btn-referencia:hover {
    background-color: color-mix(in srgb, var(--ambar) 30%, var(--superficie));
    border-color: var(--ambar);
}

.btn-add-more {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.2px dashed var(--borda);
    background: transparent;
    color: var(--texto-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 6px;
    padding: 0;
    flex-shrink: 0;
}

.btn-add-more:hover {
    border-style: solid;
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--acento-sutil);
    transform: scale(1.05);
}

.btn-clear-all-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 14px;
    background-color: transparent;
    color: var(--texto-3);
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-clear-all-inner:hover {
    background-color: color-mix(in srgb, var(--vermelho) 30%, var(--superficie));
    color: var(--vermelho-texto);
    transform: scale(1.1);
}

.internal-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 14px;
    background-color: var(--superficie);
    color: var(--texto-3);
    border: 1px solid var(--borda);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

.internal-tag:hover {
    border-color: var(--borda);
    background-color: var(--fundo);
}

.tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 14px;
    border-radius: 4px;
    color: var(--texto-3);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 0;
    padding: 0;
    transform: translateY(-0.5px);
}

.tag-remove:hover {
    background-color: color-mix(in srgb, var(--vermelho) 30%, var(--superficie));
    color: var(--vermelho-texto);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: var(--superficie);
    color: var(--texto-3);
    border-radius: 8px;
    border: 1px solid var(--borda);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
}

.tag:hover {
    background-color: var(--fundo);
    border-color: var(--borda);
}

.tag-text {
    white-space: nowrap;
}


/* Table Styling */
.table-wrapper {
    margin: 24px 40px;
    background-color: var(--superficie);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: separate;
    /* Required for solid sticky borders */
    border-spacing: 0;
    font-size: 14px;
    text-align: left;
}

thead th {
    background-color: var(--superficie);
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 16px;
    border-bottom: 2px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 10;
}

thead th.col-fixed {
    z-index: 20;
    background-color: var(--superficie);
}

tbody td.col-fixed {
    z-index: 10;
    background-color: var(--superficie);
}

/* Maintain opaque background for sticky column in special rows */
.row-reference td.col-fixed {
    background-color: var(--acento-sutil) !important;
}

.row-average td.col-fixed {
    background-color: var(--fundo) !important;
}

/* Specific styling for highlighted Reference Columns */
th.col-reference,
td.col-reference {
    background-color: var(--acento-sutil) !important;
    /* Slightly deeper blue for highlight */
    border-right: 1px solid var(--acento) !important;
    /* Stronger, primary-colored border - thinned to 1px */
}

thead th.col-reference {
    z-index: 25;
    /* Higher than other fixed columns */
    background-color: var(--acento-sutil) !important;
}

.col-fixed {
    position: sticky;
    border-right: 1px solid var(--border-color);
    box-shadow: 2px 0 5px color-mix(in srgb, var(--texto) 5%, transparent);
    /* Opaque backgrounds are handled per column type */
}

tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    white-space: nowrap;
}

tbody tr:last-child td {
    border-bottom: none;
}

/* Row types */
.row-reference {
    background-color: var(--acento-sutil);
}

.row-reference .col-indicador {
    border-left: 4px solid var(--primary-color);
    font-weight: 700;
    color: var(--primary-color);
}

.row-average {
    background-color: var(--fundo);
    font-style: italic;
    color: var(--text-secondary);
}

.row-average td {
    font-weight: 600;
}

.row-comparison {
    background-color: var(--superficie);
}

/* Hover effects */
tr:hover td {
    background-color: var(--fundo) !important;
}

tr:hover td.col-fixed {
    background-color: var(--fundo) !important;
}

/* Ensure Reference column maintains highlight even on hover */
tr:hover td.col-reference {
    background-color: var(--acento-sutil) !important;
    /* Slightly darker on hover to show interaction */
}

/* Charts Layout */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Single column layout */
    gap: 32px;
    padding: 24px;
    /* Matched to px-6 from code.html */
    max-width: 1800px;
    /* Aligned with filter-grid */
    margin: 0 auto;
}

.chart-container {
    background-color: var(--card-bg);
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    /* Reduced from 24px and merged */
    animation: fadeIn 0.5s ease-out;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    /* Align title and badges on their text baseline */
    margin-bottom: 15px;
    padding: 0 10px;
}

.chart-title-group h3 {
    font-size: 16px;
    /* Increased from 14px */
    font-weight: 800;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
    /* Remove margin to stay flush with stats line */
}

.chart-stats-unified {
    display: flex;
    flex-direction: row;
    /* Horizontal alignment */
    align-items: center;
    gap: 15px;
    /* Comfortable gap between badges and boxplot */
    justify-content: flex-end;
}

.chart-badges {
    display: flex;
    gap: 8px;
}

.chart-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
}

.badge-avg {
    background-color: color-mix(in srgb, var(--acento-forte) 10%, transparent);
    color: var(--primary-color);
}

.badge-median {
    background-color: color-mix(in srgb, var(--verde-70) 10%, transparent);
    color: var(--verde-texto);
    /* Emerald-500 */
}

/* Boxplot Styles */
.boxplot-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Increased gap */
    min-width: 0;
    /* Safety for flex container */
}

.boxplot-container {
    width: 150px;
    height: 24px;
    /* Even taller for maximum representation */
    position: relative;
    background: transparent;
    border: none;
    border-radius: 11px;
}

.boxplot-line {
    position: absolute;
    top: 50%;
    height: 2.2px;
    /* Thicker line */
    background-color: var(--neutro-70);
    transform: translateY(-50%);
}

/* Whisker Caps (Vertical Ticks) */
.boxplot-line::before,
.boxplot-line::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 3.0px;
    /* Slightly thicker whiskers */
    height: 14px;
    /* Taller whiskers */
    background-color: var(--neutro-70);
    transform: translateY(-50%);
}

.boxplot-line::before {
    left: 0;
}

.boxplot-line::after {
    right: 0;
}

.boxplot-box {
    position: absolute;
    top: 4px;
    /* Center in 24px container */
    bottom: 4px;
    background-color: color-mix(in srgb, var(--neutro-80) 10%, transparent);
    border: 2.0px solid var(--borda-forte);
    /* Thicker box border */
    border-radius: 2px;
}

.boxplot-median-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    /* Increased from 2px */
    background-color: var(--verde-70);
}

.boxplot-label {
    font-size: 10px;
    /* Matched to .chart-badge */
    color: var(--primary-color);
    /* Blue tone matching large groups */
    font-weight: 700;
    /* Matched font weight to badges as well */
    white-space: nowrap;
    opacity: 1;
}

.boxplot-value {
    color: var(--vermelho-texto);
    /* Darker red (Red 800) for numeric values of extremes */
}

.boxplot-titles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-left: 1px solid var(--border-color);
    padding-left: 15px;
    margin-left: 10px;
}

.boxplot-refdev {
    font-size: 10px;          /* igual à linha de cima (sublegend) */
    font-weight: 600;
    margin-top: 2px;
}
.refdev-good { color: var(--verde-texto); }  /* verde da MEDIANA (bom) */
.refdev-bad  { color: var(--vermelho-texto); }  /* vinho/vermelho (ruim) */

.boxplot-sublegend {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    /* Slightly bolder */
    white-space: nowrap;
    /* Never break line */
    flex-shrink: 0;
    /* Ensure text doesn't squeeze */
}

/* Chart Grid and Body structure */
.chart-body {
    position: relative;
    height: 250px;
    /* Increased slightly for scrollbar safety */
    display: flex;
    gap: 0;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 35px 15px 10px 15px;
    /* Restored standard padding, structure handles alignment */
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Internal Scroll Viewport */
.chart-scroll-viewport {
    flex: 1;
    min-width: 0;
    /* CRITICAL: Allows flex child to shrink/be contained */
    overflow-x: hidden;
    overflow-y: visible;
    position: relative;
    display: flex;
    flex-direction: column;
}

.is-scrollable .chart-scroll-viewport {
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: 5px;
    /* Tiny space for scrollable area */
}

/* Scrollbar Styling - Strictly internal */
.chart-scroll-viewport::-webkit-scrollbar {
    height: 6px;
}

.chart-scroll-viewport::-webkit-scrollbar-track {
    background: var(--fundo);
    border-radius: 10px;
}

.chart-scroll-viewport::-webkit-scrollbar-thumb {
    background: var(--hover);
    border-radius: 10px;
}

.chart-scroll-viewport::-webkit-scrollbar-thumb:hover {
    background: var(--neutro-80);
}

.chart-scroll-content {
    min-width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.is-scrollable .chart-scroll-content {
    width: max-content;
}

/* Y-Axis scale stays outside the scroll viewport */
.y-axis-labels {
    width: 75px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

.y-axis-inner {
    flex: 1;
    position: relative;
    /* This mirrors .chart-main-area perfectly */
}

.y-axis-spacer {
    height: 35px;
    /* Matches .chart-labels-wrapper height */
    width: 100%;
}

.y-axis-labels span {
    position: absolute;
    right: 12px;
    font-size: 10px;
    color: var(--texto-3);
    font-weight: 500;
    text-align: right;
    transform: translateY(50%);
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.y-axis-bottom-spacer {
    flex: 1;
}

.chart-main-area {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
    /* Allow flex shrinking if needed */
}

.chart-labels-wrapper {
    height: 40px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* Center few items */
    gap: 12px;
    position: relative;
    width: max-content;
    min-width: 100%;
}

.is-scrollable .chart-labels-wrapper {
    justify-content: flex-start;
    /* Ensure scroll starts from left */
}

.chart-grid-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--fundo);
    z-index: 1;
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Slightly more visible slate-200 */
    width: 100%;
}

.grid-zero {
    background-color: var(--neutro-80);
    /* Darker slate-400 for 0 baseline */
    opacity: 0.8;
    height: 1.5px;
    z-index: 2;
}

.bars-wrapper {
    display: flex;
    width: max-content;
    min-width: 100%;
    height: 100%;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    position: relative;
    z-index: 3;
}

.is-scrollable .bars-wrapper {
    justify-content: flex-start;
    /* Ensure scroll starts from left */
}

/* Footer Labels Area - Resetting legacy blocks */
.chart-labels-footer,
.labels-wrapper,
.label-item {
    display: none;
}

/* Bars structure */
.bar-group {
    flex: 0 0 75px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

.is-scrollable .bar-group {
    flex: 0 0 75px;
    max-width: none;
}

.bar {
    width: 90%;
    background-color: var(--neutral-bar);
    border-radius: 8px 8px 0 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Enhanced transition for height scaling */
    cursor: pointer;
    position: relative;
    min-height: 2px;
}

.bar:hover {
    background-color: var(--hover);
}

.bar-reference {
    background-color: var(--reference-color) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--acento-forte) 20%, transparent);
    z-index: 5;
}

.bar-value {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.value-bold {
    font-weight: 800;
    color: var(--primary-color) !important;
}

.bar-label-container {
    flex: 0 0 75px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 5px;
}

.is-scrollable .bar-label-container {
    flex: 0 0 75px;
    /* Mirror .bar-group width in scrollable mode */
}

.bar-label {
    font-size: 9px;
    color: var(--texto-3);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    line-height: 1.1;
    display: block;
}

.bar-label-reference {
    color: var(--reference-color);
    font-weight: 800;
}

/* Benchmark Line */
.benchmark-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--benchmark-line);
    z-index: 2;
    pointer-events: none;
}

.benchmark-label {
    position: absolute;
    left: 0;
    top: -15px;
    font-size: 9px;
    font-weight: 700;
    color: var(--benchmark-line);
    text-transform: uppercase;
    background: var(--superficie);
    padding-right: 4px;
}

/* Stacked Chart Styles */
.stacked-chart-main {
    margin-top: 20px;
    padding-bottom: 20px;
}

.stacked-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    max-width: 700px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    white-space: nowrap;
}

.stacked-bar-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 60px;
    position: relative;
    height: 100%;
}

.total-label {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
}

.stacked-bar {
    width: 32px;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    /* Stack from bottom to top */
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--fundo);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--texto) 5%, transparent);
    transition: all 0.3s ease;
}

.stacked-bar.is-reference {
    box-shadow: 0 0 0 2px var(--reference-color), 0 4px 12px color-mix(in srgb, color-mix(in srgb, var(--acento) 30%, var(--superficie)) 30%, transparent);
}

.bar-segment {
    width: 100%;
    position: relative;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.bar-segment:hover {
    filter: brightness(1.1) saturate(1.2);
}

.bar-segment:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--superficie) 20%, transparent);
}

.mt-10 {
    margin-top: 40px;
}

.segment-value {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 8px;
    font-weight: 800;
    color: var(--texto-invertido);
    text-shadow: 0 1px 2px color-mix(in srgb, var(--texto) 50%, transparent);
    pointer-events: none;
    overflow: hidden;
    white-space: nowrap;
}

.legend-item:hover {
    background-color: var(--fundo);
    cursor: pointer;
    border-radius: 4px;
}

.legend-item.is-faded {
    opacity: 0.3;
}

.bar-segment {
    transition: all 0.3s ease;
}

.bar-segment.is-faded {
    opacity: 0.15;
    filter: grayscale(0.5);
}

.bar-segment.is-highlighted {
    filter: brightness(1.2) saturate(1.2);
    box-shadow: 0 0 10px color-mix(in srgb, var(--texto) 10%, transparent);
    z-index: 10;
}
/* ===== Presets por tag DENTRO do dropdown de Referência (Edital / Em Estudo) ===== */
.ref-preset-option {
    font-weight: 700; color: var(--acento-texto); background: var(--acento-sutil);
    display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.ref-preset-option:hover { background: var(--acento-sutil); }
.ref-preset-option .ref-preset-ico { color: var(--ambar-texto); font-size: 12px; line-height: 1; }
.ref-preset-option label { cursor: pointer; font-size: 12px; }
.ref-preset-sep { height: 1px; background: var(--border-color); margin: 4px 8px; }

/* Nome da concessão na Análise Comparativa: 1px maior que o texto ao redor */
.refdev-name { font-size: calc(1em + 1px); }

/* Segmentador de blocos da aba INSIGHTS (Todos / Receita / CAPEX... ) */
.insights-seg {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    /* Linha superior E inferior no próprio segmentador, ambas recuadas (mesma largura do
       conteúdo acima); a de baixo encosta no rodapé do header. Conteúdo centralizado. */
    margin-top: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
body[data-view="insights"] .main-header { border-bottom-color: transparent; }
body[data-view="insights"] .filter-section { padding-bottom: 0; }
.insights-seg-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-secondary); margin-right: 4px;
}
.insights-group-btn {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--texto-2); background: var(--acento-sutil); border: 1.5px solid var(--acento); border-radius: 8px;
    padding: 9px 14px; cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.insights-group-btn:hover { background: var(--acento-sutil); border-color: var(--acento); color: var(--texto); }
.insights-group-btn.active {
    background: var(--primary-color); border-color: var(--primary-color); color: var(--texto-invertido);
}
/* Slider de limiar de desvio (Desvio ≥ X%) — à direita do segmentador */
.insights-thresh {
    display: flex; align-items: center; gap: 10px; margin-left: auto;
}
.insights-thresh-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-secondary); white-space: nowrap;
}
.insights-thresh-label span { color: var(--primary-color); font-size: 12px; }
.insights-thresh-range {
    width: 160px; cursor: pointer; accent-color: var(--primary-color);
}

/* Alerta de referência única (aba INSIGHTS) */
.ref-single-warning {
    margin-top: 8px; padding: 6px 10px; border-radius: 8px;
    background: color-mix(in srgb, var(--vermelho) 30%, var(--superficie)); border: 1px solid var(--vermelho); color: var(--vermelho-texto);
    font-size: 12px; font-weight: 700; line-height: 1.3;
}

/* ===== Tooltips dos indicadores (hover mostra; clique fixa; clique-fora desfixa) ===== */
/* O nome do indicador vira alvo interativo SÓ onde há descrição (evita poluição visual). */
.ind-name {
    cursor: help;
    border-bottom: 1px dotted var(--text-secondary, var(--borda-forte));
    /* limita a área sensível ao próprio texto (inline) — hover só no nome, não na linha/célula inteira */
}
.ind-name:hover { border-bottom-color: var(--primary-color, var(--acento)); }
/* No cabeçalho dos gráficos (<h3>), o span é inline dentro do título */
.chart-title-group h3 .ind-name { display: inline; }

.bench-tooltip {
    position: fixed;
    z-index: 9999;
    max-width: 340px;
    background: var(--texto);
    color: var(--texto-invertido);
    border: 1px solid color-mix(in srgb, var(--superficie) 12%, transparent);
    border-radius: 10px;
    padding: 11px 13px;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--texto) 28%, transparent);
    font-size: 12.5px;
    line-height: 1.45;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity .12s ease, transform .12s ease;
    pointer-events: none;
}
.bench-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.bench-tooltip.pinned {
    pointer-events: auto; /* fixada: permite ler/selecionar e clicar no × */
    border-color: var(--primary-color, var(--acento));
    box-shadow: 0 10px 30px color-mix(in srgb, var(--texto) 34%, transparent), 0 0 0 2px color-mix(in srgb, var(--acento-forte) 25%, transparent);
    padding-right: 30px;
}
.bench-tip-txt { font-weight: 500; }
.bench-tip-nota {
    margin-top: 7px;
    padding-top: 7px;
    border-top: 1px solid color-mix(in srgb, var(--superficie) 14%, transparent);
    font-size: 11.5px;
    font-style: italic;
    color: var(--texto-3);
}
.bench-tip-close {
    position: absolute;
    top: 5px;
    right: 6px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 6px;
    background: color-mix(in srgb, var(--superficie) 10%, transparent);
    color: var(--texto-invertido);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.bench-tip-close:hover { background: color-mix(in srgb, var(--superficie) 22%, transparent); }

/* ATLAS: daqui para baixo, bloco gerado pelo aplicador */
/* ---------- a marca, dimensionada pela TINTA (pele Atlas v2) ----------
   UMA medida declarada (`--altura-do-A`); todo o resto sai das métricas da peça
   ativa (identidade/marca-metricas.css). Este cabeçalho tem 80 px, o mesmo dos
   painéis de concessão, então a régua é a MESMA que foi aprovada lá:

                        cabeçalho   A     A/cabeçalho   título começa em
     2 de Julho (ok)       80 px   48,0      0,60           240 px  (5,0 x A)
     BENCHMARKING (antes)  80 px      -         -            ~142 px
     BENCHMARKING (agora)  80 px   48,0      0,60           240 px

   A peça aqui é a ASSINATURA COMPLETA, com o descritor RODOVIAS. No painel de
   cabeçalho apertado (64 px, o ferrovia) a peça oficial gasta um terço da caixa
   em respiro e no descritor, que sairia com 4 px de altura, e por isso lá se usa
   a versão recortada na tinta. Aqui o cabeçalho tem 80 px e sobra largura: a
   peça inteira cabe e o descritor fica legível, que é o desenho aprovado.

   Declarar a altura da CAIXA direto faria a marca mudar de tamanho a cada troca
   de peça, porque cada peça tem uma fração de tinta diferente: só
   `--altura-do-A` é declarada, e a caixa sai dela e das métricas. Trocar de peça
   é trocar `marca-metricas.css` (gerado com `--oficial`), e mais nada. */
:root{
  --altura-do-A: 48px;
  --h-logo: calc(var(--altura-do-A) / var(--marca-fracao-a, 0.6693));
  /* a calha, para o título começar sempre no mesmo x: 240 px de razão 5,0 sobre
     o A, menos os 40 px de `gap` do próprio cabeçalho */
  --largura-marca: 200px;
}
/* a especificidade tem de igualar a regra antiga (`.logo-container img.logo`),
   senão a altura de 62,5 px continua vencendo e a régua não vale nada */
.logo-container .logo{
  height: var(--h-logo);
  width: var(--largura-marca);
  object-fit: contain;
  object-position: left center;
  transform: translateY(calc(-1 * var(--marca-desvio, 0) * var(--h-logo)));
}
.header-top{ align-items: center; }
/* O comportamento da marca no tema escuro NÃO mora aqui: mora em
   identidade/marca-metricas.css, que é a folha que acompanha a peça e é
   carregada por TODA página que exibe a marca, inclusive o login, que tem CSS
   próprio e não carrega esta folha. */

/* ---------- o que a tradução por VALOR não alcança ----------
   `.bar-label-reference` pedia a cor da BARRA para escrever o nome da concessão
   de referência em 9 px. O laranja original dava 1,9:1 sobre branco, ou seja, o
   rótulo da barra que existe para se destacar era o menos legível da tela. Cor
   de preenchimento e cor de texto são papéis diferentes do MESMO matiz, e é por
   isso que o sistema tem os dois tokens. */
.bar-label-reference{ color: var(--acento-texto); }
.value-bold{ color: var(--acento-texto) !important; }
/* ---------- o rótulo da mediana é TEXTO, não a linha ----------
   `--benchmark-line` serve à linha tracejada (uma borda, que precisa de 1,25:1)
   e ao RÓTULO dela em 9 px negrito (que precisa de 4,5:1). Traduzida para um só
   token, a linha ficou certa e o rótulo saiu em 2,11:1, medido pelo auditor de
   UI. O laranja original já era ruim (2,5:1); é a mesma confusão entre cor de
   pintar e cor de escrever, agora numa variável do próprio painel. */
.benchmark-label{ color: var(--texto-3); }

/* o botão de tema (.btn-tema) é vestido pelo próprio tema.js: só ícone, 30 px, redondo */

/* ---------- ritmo vertical do casco (pele Atlas) ----------
   O mesmo raciocínio do cronograma, aplicado ao que TODAS as abas compartilham:
   o respiro ganha piso, teto e uma medida ligada à altura da janela. Em monitor
   alto fica como estava; em notebook encolhe até o piso em vez de empurrar a
   página para o segundo rolo.

   O cabeçalho NÃO entra: os 80 px dele são a régua da marca (A de 48 px, 0,600
   do cabeçalho), e encolher a caixa mudaria a assinatura, que é decisão de
   identidade e não de espaço. */
.filter-section { padding-top: clamp(10px, 2.2vh, 24px); padding-bottom: clamp(10px, 2.2vh, 24px); }
.nav-btn { padding-top: clamp(9px, 1.7vh, 16px); padding-bottom: clamp(9px, 1.7vh, 16px); }

/* ---------- ritmo vertical da TABELA ----------
   A altura de uma aba de tabela é o número de indicadores vezes a altura da
   linha, e isso é conteúdo: não há margem que dê conta. O que dá para fazer é o
   mesmo do casco, dar ao respiro um piso e uma medida ligada à janela, e é o que
   leva a aba de OPEX de 916 px para dentro dos 813 px de uma tela de 1440x900.
   Em tela mais baixa ela continua rolando, e continua certo que role: quinze
   linhas não cabem por decreto. */
.table-wrapper { margin-top: clamp(8px, 1.8vh, 24px); margin-bottom: clamp(8px, 1.8vh, 24px); }
thead th { padding-top: clamp(9px, 1.8vh, 16px); padding-bottom: clamp(9px, 1.8vh, 16px); }
tbody td { padding-top: clamp(6px, 1.2vh, 14px); padding-bottom: clamp(6px, 1.2vh, 14px); }