:root {
    --vino: #611232;
    --vino2: #7c183f;
    --dorado: #a57f2c;
    --tinta: #1f2933;
    --muted: #65717f;
    --linea: #d8d1c4;
    --fondo: #f5f2ec;
    --panel: #fff;
    --panel2: #fbfaf7;
    --ok: #235b4e;
    --r: 8px;
    --shadow: 0 14px 34px rgba(38,31,24,.10);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.35;
}

.topbar {
    background: var(--vino);
    color: #fff;
    border-bottom: 5px solid var(--dorado);
}

.topbar-inner {
    width: min(1480px, calc(100% - 32px));
    margin: 0 auto;
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brand-mark {
    width: 56px;
    height: 56px;
    border: 2px solid rgba(255,255,255,.72);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 19px;
}

.brand h1 {
    margin: 0;
    font-size: clamp(22px, 2.2vw, 34px);
    font-weight: 800;
}

.brand p,
.source-pill {
    color: rgba(255,255,255,.84);
    font-size: 14px;
}

.source-pill {
    text-align: right;
    font-size: 12px;
    max-width: 430px;
}

.layout {
    width: min(1480px, calc(100% - 32px));
    margin: 22px auto 36px;
    display: grid;
    gap: 18px;
}

.module-switch {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px;
    width: fit-content;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}

.module-tab {
    height: 38px;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0 14px;
    background: transparent;
    color: #51483c;
    font-weight: 800;
    cursor: pointer;
}

.module-tab.active {
    background: var(--vino);
    border-color: var(--vino);
    color: #fff;
}

.filters,
.kpi {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--shadow);
}

.filters {
    padding: 18px;
}

.filters-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.55fr .7fr .7fr .7fr .7fr .85fr auto;
    gap: 12px;
    align-items: end;
}

label {
    display: grid;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #41505f;
}

select,
input {
    width: 100%;
    height: 40px;
    border: 1px solid #bfb8aa;
    border-radius: 6px;
    background: #fff;
    color: var(--tinta);
    padding: 0 10px;
    font-size: 14px;
}

.btn {
    height: 40px;
    border: 1px solid #cfc3b1;
    border-radius: 6px;
    padding: 0 14px;
    background: #ece5d8;
    color: #412c35;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

.kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.kpi {
    padding: 16px;
    min-height: 118px;
}

    .kpi .label {
        color: var(--muted);
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .kpi .value {
        margin-top: 10px;
        font-size: clamp(22px, 2vw, 32px);
        font-weight: 850;
        color: var(--vino);
    }

    .kpi .note {
        margin-top: 8px;
        color: #697685;
        font-size: 12px;
    }

@media (max-width: 1120px) {
    .filters-grid,
    .kpis {
        grid-template-columns: 1fr;
    }

    .source-pill {
        text-align: left;
    }

    .topbar-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 0;
    }
}

.work-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 18px;
    align-items: start;
    width: 100%;
}

.work-grid > *,
.left,
.side {
    min-width: 0;
}

.left {
    display: grid;
    gap: 18px;
    align-items: start;
}
.left > .kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.left > .kpis .kpi {
    min-height: 86px;
    padding: 12px;
    box-shadow: 0 8px 18px rgba(38,31,24,.06);
}

.left > .kpis .kpi .label {
    font-size: 10px;
}

.left > .kpis .kpi .value {
    margin-top: 6px;
    font-size: 18px;
}

.left > .kpis .kpi .note {
    margin-top: 5px;
    font-size: 11px;
}

.panel,
.cart-panel,
.calc-card {
    background: var(--panel);
    border: 1px solid var(--linea);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.panel-head {
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--linea);
    background: var(--panel2);
}

    .panel-head h2,
    .calc-card h3 {
        margin: 0;
        font-size: 17px;
        color: #3d2730;
    }

.meta {
    color: var(--muted);
    font-size: 12px;
}

.notice {
    padding: 12px 16px;
    color: #51483c;
    background: #fbf4e7;
    border-bottom: 1px solid #eadbc1;
    font-size: 13px;
}

.table-wrap,
.cart-wrap {
    overflow: auto;
    max-height: 500px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

#resultsTable {
    min-width: 980px;
}

.cart-table {
    min-width: 980px;
    font-size: 11px;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #efe7d9;
    color: #46363a;
    border-bottom: 1px solid #cfc3b1;
    text-align: left;
    padding: 9px 10px;
    white-space: nowrap;
}

tbody td {
    border-bottom: 1px solid #eee8df;
    padding: 9px 10px;
    vertical-align: top;
}

.money,
.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.tag-pim {
    display: inline-block;
    background: #d8f3dc;
    color: #1b5e20;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}


.empty {
    padding: 28px 16px;
    color: var(--muted);
    text-align: center;
}

.cart-panel {
    margin-top: 18px;
}

.cart-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--linea);
}

.cart-total {
    padding: 10px;
    border: 1px solid #e1d7c5;
    border-radius: 6px;
    background: #fbfaf7;
}

/* [BRECHAS-TRABAJADORES] Resalta solo las tarjetas de numero de trabajadores. */
.worker-card {
    background: #f4f8ee;
    border-color: #cbd8b0;
}

.worker-card strong {
    color: #556b2f;
}

.worker-card small {
    display: block;
    margin-top: 4px;
    color: #65723d;
    font-size: 10px;
    font-weight: 700;
}

    .cart-total span {
        display: block;
        color: var(--muted);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .cart-total strong {
        display: block;
        margin-top: 5px;
        color: var(--vino);
        font-size: 18px;
    }

.cart-note {
    font-size: 12px;
    color: var(--muted);
    padding: 0 16px 14px;
}

.side {
    display: grid;
    gap: 14px;
    align-self: start;
}

.calc-card {
    padding: 16px;
}

.formula {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 6px;
    background: #f8f4ec;
    border: 1px solid #e1d7c5;
}

.formula-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.formula-row strong {
    color: var(--vino);
    font-size: 18px;
}

#insights {
    display: grid;
    gap: 10px;
    color: var(--muted);
    font-size: 13px;
}

#insights > div {
    padding-left: 12px;
    border-left: 3px solid var(--dorado);
}

.cart-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.btn.primary {
    background: var(--vino);
    border-color: var(--vino);
    color: #fff;
}

.btn.ok {
    background: var(--ok);
    border-color: var(--ok);
    color: #fff;
}

.btn.small {
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

@media (max-width: 1180px) {
    .work-grid,
    .side,
    .cart-summary {
        grid-template-columns: 1fr;
    }
}

.projection-panel {
    margin-top: 18px;
}

.projection-head-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.projection-controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--linea);
    background: #fff;
}

.projection-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--linea);
    background: #fff;
}

.monthly-chart-panel {
    padding: 14px 16px;
    border-bottom: 1px solid var(--linea);
    background: #fff;
}

.monthly-chart-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
    color: #3d2730;
    font-size: 13px;
}

.monthly-chart-head span {
    color: var(--muted);
    font-size: 12px;
}

.monthly-chart {
    height: 190px;
    display: grid;
    grid-template-columns: repeat(12, minmax(34px, 1fr));
    gap: 8px;
    align-items: end;
    border: 1px solid #e1d7c5;
    border-radius: 6px;
    background: #fbfaf7;
    padding: 14px 12px 10px;
    overflow-x: auto;
}

.month-bar {
    min-width: 34px;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 6px;
    align-items: end;
}

.month-bar-fill {
    height: var(--bar-height);
    min-height: 3px;
    background: var(--vino);
    border-radius: 5px 5px 2px 2px;
    position: relative;
}

.month-bar-fill.peak {
    background: var(--dorado);
}

.month-bar-fill span {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%);
    font-size: 10px;
    color: #4d5b69;
    white-space: nowrap;
}

.month-bar-label {
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: #46363a;
}

.projection-wrap {
    overflow: auto;
    max-height: 520px;
}

.projection-wrap.is-hidden {
    display: none;
}

.projection-table {
    min-width: 1780px;
    font-size: 11px;
}

.projection-table th,
.projection-table td {
    padding: 7px 8px;
}

.projection-total-row td {
    background: #f1eadc;
    border-top: 2px solid var(--dorado);
    font-weight: 800;
}

.projection-total-row .label {
    text-align: right;
    color: #3d2730;
}

@media (max-width: 1180px) {
    .projection-controls,
    .projection-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1180px) and (min-width: 921px) {
    .work-grid {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .side {
        grid-template-columns: 1fr;
    }
}

.concept-wrap {
    overflow: auto;
    max-height: 420px;
}

.concept-table {
    min-width: 1120px;
    font-size: 11px;
}

.concept-table th,
.concept-table td {
    padding: 7px 8px;
}

.concept-table th,
.concept-table td.code,
.concept-table td.money,
.concept-table td:nth-child(4),
.concept-table td:nth-child(5),
.concept-table td:nth-child(6),
.concept-table td:nth-child(9) {
    white-space: nowrap;
}

.cart-table tr.detail-selected {
    background: #f1eadc;
    box-shadow: inset 4px 0 0 var(--vino);
}
.concept-panel {
    display: none;
    position: fixed;
    inset: 5vh min(4vw, 56px);
    z-index: 50;
    margin-top: 0;
    max-width: 1360px;
    width: calc(100% - min(8vw, 112px));
    max-height: 90vh;
    overflow: hidden;
    justify-self: center;
}

.concept-panel.is-open {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
}

.concept-panel::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(31, 41, 51, .42);
}

.concept-panel .panel-head {
    position: sticky;
    top: 0;
    z-index: 3;
}

.concept-panel .cart-note {
    border-bottom: 1px solid var(--linea);
}

.concept-panel .concept-wrap {
    max-height: none;
    height: 100%;
}

@media (max-width: 760px) {
    .concept-panel {
        inset: 12px;
        width: calc(100% - 24px);
        max-height: calc(100vh - 24px);
    }
}
.concept-panel {
    background: #fff;
}

.concept-table tbody tr:nth-child(odd):not(.cart-total-row) {
    background: #ffffff;
}

.concept-table tbody tr:nth-child(even):not(.cart-total-row) {
    background: #fbfaf7;
}

.concept-table tbody tr:hover:not(.cart-total-row) {
    background: #f4efe5;
}

.concept-table td {
    border-bottom: 1px solid #eee8df;
}

.gap-panel {
    margin-top: 18px;
}

.gap-controls {
    display: grid;
    grid-template-columns: 1.4fr repeat(5, minmax(0, .75fr)) auto;
    gap: 12px;
    align-items: end;
    padding: 14px 16px;
    border-bottom: 1px solid var(--linea);
    background: #fff;
}

/* [BRECHAS-MODO] Selector entre costo institucional y percepción PIM. */
.gap-mode-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--linea);
    background: #f7f8f5;
}

.gap-mode-bar > div:first-child {
    display: grid;
    gap: 3px;
}

.gap-mode-bar strong {
    color: #3d2730;
    font-size: 13px;
}

.gap-mode-bar span {
    color: var(--muted);
    font-size: 12px;
}

.gap-mode-selector {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    padding: 3px;
    border: 1px solid #cfc5b7;
    border-radius: 6px;
    background: #fff;
}

.gap-mode-button {
    min-height: 34px;
    padding: 7px 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #51483c;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.gap-mode-button.active {
    background: var(--vino);
    color: #fff;
}

.gap-mode-button:focus-visible {
    outline: 2px solid var(--dorado);
    outline-offset: 2px;
}

.gap-note {
    padding: 12px 16px;
    color: #51483c;
    background: #fbf4e7;
    border-bottom: 1px solid #eadbc1;
    font-size: 13px;
}

.gap-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--linea);
    background: #fff;
}

.gap-visual {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(240px, 1fr);
    gap: 16px;
    padding: 14px 16px 16px;
    background: #fff;
}

.gap-treemap {
    min-height: 520px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-content: flex-start;
    border: 1px solid #e1d7c5;
    border-radius: 6px;
    background: #fbfaf7;
    padding: 12px;
}

.gap-missing-panel {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 10px;
}

.gap-missing-list {
    min-height: 220px;
    max-height: 300px;
    overflow: auto;
    display: grid;
    align-content: start;
    gap: 8px;
    border: 1px solid #e1d7c5;
    border-radius: 6px;
    background: #fbfaf7;
    padding: 10px;
}

.gap-missing-head {
    margin-top: 4px;
}

.gap-missing-item {
    display: grid;
    gap: 3px;
    padding: 8px 9px;
    border: 1px solid #e9dfcf;
    border-radius: 6px;
    background: #fff;
}

.gap-missing-item strong {
    color: #3d2730;
    font-size: 12px;
}

.gap-missing-item span {
    color: var(--muted);
    font-size: 11px;
}

/* [BRECHAS-RANKING-ZE] Ranking ejecutivo por zona economica dentro del panel derecho. */
.gap-zone-ranking-list {
    min-height: 300px;
    max-height: 390px;
    overflow: auto;
    display: grid;
    gap: 10px;
    border: 1px solid #e1d7c5;
    border-radius: 6px;
    padding: 10px;
    background: #faf7f2;
}

.gap-zone-ranking-group {
    display: grid;
    gap: 6px;
}

.gap-zone-ranking-title {
    color: #3d2730;
    font-size: 12px;
    font-weight: 850;
}

.gap-zone-ranking-item {
    display: grid;
    gap: 3px;
    padding: 8px 9px;
    border: 1px solid #e9dfcf;
    border-radius: 6px;
    background: #fff;
}

.gap-zone-ranking-item strong {
    color: #3d2730;
    font-size: 12px;
    line-height: 1.2;
}

.gap-zone-ranking-item span {
    color: var(--muted);
    font-size: 11px;
}

.gap-tile {
    flex: var(--tile-grow) 1 132px;
    min-height: 126px;
    display: grid;
    align-content: space-between;
    gap: 8px;
    padding: 10px;
    border-radius: 6px;
    background: var(--tile-bg);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
    cursor: pointer;
}

.gap-tile.selected {
    outline: 3px solid var(--dorado);
    outline-offset: 2px;
}

/* [BRECHAS-TREEMAP] Identifica visualmente los bloques de Z.E. 2 cuando se muestran todas las zonas economicas. */
.gap-tile.zone-2 {
    color: #26301c;
    box-shadow: inset 0 0 0 1px rgba(65, 84, 37, .32);
}

.gap-tile strong {
    font-size: 12px;
    line-height: 1.2;
}

.gap-tile span {
    font-size: 22px;
    font-weight: 850;
}

.gap-tile small {
    font-size: 11px;
    opacity: .92;
}

.gap-tile-values {
    display: grid;
    gap: 3px;
}

.gap-tile-values small {
    font-size: 10px;
    line-height: 1.2;
}

.gap-ranking-wrap {
    max-height: 330px;
    overflow: auto;
    border: 1px solid #e1d7c5;
    border-radius: 6px;
}

.gap-detail-panel {
    padding: 0 16px 16px;
    background: #fff;
}

/* [BRECHAS-PROMEDIO] Referencia nacional anual y mensual por nivel. */
.gap-national-average {
    display: grid;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--linea);
    background: #f7f8f5;
}

.gap-national-average-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.gap-national-average-title strong {
    color: #3d2730;
    font-size: 13px;
}

.gap-national-average-title span {
    color: var(--muted);
    font-size: 11px;
    text-align: right;
}

.gap-national-average-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.gap-table {
    min-width: 880px;
    font-size: 11px;
}

.gap-table th,
.gap-table td {
    padding: 8px 9px;
}

.gap-table tbody tr {
    cursor: pointer;
}

.gap-table tbody tr.selected td {
    background: #f1eadc;
    box-shadow: inset 4px 0 0 var(--vino);
}

/* [BRECHAS-CURVA] Grafica horizontal de costo por nivel del estado seleccionado. */
.gap-curve-panel {
    position: fixed;
    inset: 7vh min(5vw, 72px);
    z-index: 60;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    max-width: 1320px;
    width: calc(100% - min(10vw, 144px));
    max-height: 86vh;
    justify-self: center;
    padding: 0;
    border: 1px solid var(--linea);
    border-radius: var(--r);
    background: #fff;
    box-shadow: 0 24px 70px rgba(31,41,51,.26);
    overflow: hidden;
}

.gap-curve-panel::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(31, 41, 51, .42);
}

.gap-curve-panel .monthly-chart-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--linea);
    background: var(--panel2);
    margin-bottom: 0;
}

.gap-curve {
    height: 100%;
    display: grid;
    gap: 9px;
    border: 0;
    border-radius: 0;
    background: #fbfaf7;
    padding: 16px;
    overflow: auto;
}

.gap-curve-row {
    display: grid;
    grid-template-columns: 54px minmax(260px, 1fr) 220px;
    gap: 12px;
    align-items: center;
}

.gap-curve-level {
    font-family: Consolas, "Courier New", monospace;
    font-weight: 850;
    color: #46363a;
}

.gap-curve-track {
    height: 28px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    background: #efe7d9;
    overflow: hidden;
}

.gap-curve-line {
    width: var(--curve-width);
    min-width: 18px;
    height: 4px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: var(--vino);
}

.gap-curve-point {
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--vino);
    box-shadow: 0 2px 6px rgba(38,31,24,.22);
    transform: translateX(8px);
}

.gap-curve-row.base .gap-curve-line,
.gap-curve-row.base .gap-curve-point {
    background: var(--ok);
}

.gap-curve-row.compare .gap-curve-line,
.gap-curve-row.compare .gap-curve-point {
    background: var(--dorado);
}

.gap-curve-value {
    display: grid;
    justify-items: end;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.gap-curve-value strong {
    color: var(--vino);
    font-size: 13px;
}

.gap-curve-value small {
    color: var(--muted);
    font-size: 10px;
}

.gap-curve-value .gap-curve-total {
    color: var(--vino);
    font-weight: 800;
}

.gap-curve-value span {
    color: var(--muted);
    font-size: 11px;
}

/* ============================================================
   MICM - INCENTIVOS DESCOMPACTADOS
   La curva muestra un indicador y el detalle se abre como drill-down.
   ============================================================ */

.micm-level-indicator-slot {
    margin-top: 7px;
}

.micm-level-indicator-slot:empty {
    display: none;
}

.micm-level-indicator {
    max-width: 100%;
    padding: 5px 7px;
    border: 1px solid #aeb48a;
    border-radius: 4px;
    background: #f1f3e5;
    color: #4a541c;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.micm-level-indicator:hover,
.micm-level-indicator:focus-visible {
    border-color: #6b711f;
    background: #dfe5b9;
    outline: 2px solid rgba(107, 113, 31, .18);
}

.micm-detalle {
    min-height: 0;
    height: 100%;
    background: #fbfaf7;
    overflow: hidden;
}

.micm-detalle:not([hidden]) {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
}

.micm-detalle-encabezado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--linea);
    background: #f4efe6;
}

.micm-detalle-encabezado h3 {
    margin: 3px 0 2px;
    color: var(--vino);
    font-size: 16px;
    letter-spacing: 0;
}

.micm-detalle-encabezado p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.micm-detalle-contenido {
    min-width: 0;
    overflow: auto;
    padding: 14px 16px 18px;
}

.micm-section {
    width: 100%;
    min-width: 0;
    margin: 0 0 14px;
    padding: 14px 0;
    border: 1px solid var(--linea);
    border-top: 3px solid #8c9560;
    border-radius: 6px;
    background: #fff;
}

/* [BRECHAS-DISTRIBUCION] Panel nacional de cantidades por nivel. */
.gap-level-distribution {
    display: grid;
    gap: 10px;
    padding: 13px 16px 15px;
    border-bottom: 1px solid var(--linea);
    background: #fff;
}

.gap-level-distribution-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.gap-level-distribution-title strong {
    color: #3d2730;
    font-size: 13px;
}

.gap-level-distribution-title span {
    color: var(--muted);
    font-size: 11px;
    text-align: right;
}

.gap-level-distribution-bars {
    display: grid;
    gap: 7px;
}

.gap-level-distribution-row {
    display: grid;
    grid-template-columns: 42px minmax(120px, 1fr) 150px;
    gap: 10px;
    align-items: center;
}

.gap-level-code {
    color: #46363a;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

.gap-level-track {
    height: 11px;
    border: 1px solid #ded8cc;
    border-radius: 3px;
    background: #f0ede7;
    overflow: hidden;
}

.gap-level-fill {
    display: block;
    height: 100%;
}

.gap-level-fill.nivel-07 { background: #611232; }
.gap-level-fill.nivel-7a { background: #9a7a2d; }
.gap-level-fill.nivel-7b { background: #3f6f68; }
.gap-level-fill.nivel-7c { background: #326a98; }
.gap-level-fill.nivel-7d { background: #6d5c91; }
.gap-level-fill.nivel-7e { background: #94484f; }
.gap-level-fill.nivel-7bc { background: #667085; }

.gap-level-value {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: var(--muted);
    font-size: 11px;
}

.gap-level-value strong {
    color: #34403d;
}

.gap-other-levels {
    padding: 7px 9px;
    border-left: 3px solid #9a7a2d;
    background: #faf7ee;
    color: #665a40;
    font-size: 10px;
}

.micm-section:last-child {
    margin-bottom: 0;
}

.micm-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 0 14px 12px;
}

.micm-heading h3 {
    margin: 3px 0 2px;
    color: var(--vino);
    font-size: 15px;
    letter-spacing: 0;
}

.micm-heading p,
.micm-detail p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

.micm-kicker {
    color: #6b711f;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.micm-source {
    color: var(--muted);
    font-size: 10px;
    white-space: nowrap;
}

.micm-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    margin: 0 14px 12px;
    border: 1px solid var(--linea);
    background: #f8f8f3;
}

.micm-summary > div {
    display: grid;
    gap: 3px;
    padding: 9px 10px;
    border-right: 1px solid var(--linea);
}

.micm-summary > div:last-child {
    border-right: 0;
}

.micm-summary span,
.micm-detail-grid span {
    color: var(--muted);
    font-size: 10px;
}

.micm-summary strong {
    color: #38411d;
    font-size: 16px;
}

.micm-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    margin: 0 14px;
}

.micm-table {
    width: 100%;
    min-width: 650px;
    border-collapse: collapse;
    font-size: 11px;
}

.micm-table th,
.micm-table td {
    padding: 7px 8px;
    border: 1px solid var(--linea);
    text-align: center;
}

.micm-table thead th {
    background: #6e1235;
    color: #fff;
    font-weight: 800;
}

.micm-table tbody th {
    min-width: 150px;
    background: #f4efe6;
    text-align: left;
}

.micm-table tbody th span {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 500;
}

.micm-table tbody tr:nth-child(even):not(.micm-total-row) td {
    background: #fafbf6;
}

.micm-total-row th,
.micm-total-row td {
    background: #ecefdc;
}

.micm-zero {
    color: #9ba09f;
}

.micm-quantity-button {
    width: 32px;
    height: 28px;
    padding: 0;
    border: 1px solid #aeb48a;
    border-radius: 4px;
    background: #f1f3e5;
    color: #4a541c;
    font-weight: 850;
    cursor: pointer;
}

.micm-quantity-button:hover,
.micm-quantity-button:focus-visible,
.micm-quantity-button.active {
    border-color: #6b711f;
    background: #dfe5b9;
    outline: 2px solid rgba(107, 113, 31, .18);
}

.micm-warning,
.micm-note {
    margin: 10px 14px 0;
    padding: 8px 10px;
    font-size: 10px;
}

.micm-warning {
    border-left: 4px solid #b68422;
    background: #fff7df;
    color: #72500f;
}

.micm-note {
    border-left: 4px solid #8c9560;
    background: #f5f7ea;
    color: #596129;
}

.micm-detail {
    margin: 10px 14px 0;
    padding: 10px;
    border-top: 1px solid var(--linea);
    background: #fbfaf7;
    color: var(--muted);
    font-size: 11px;
}

.micm-detail-title {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.micm-detail-title strong {
    color: var(--vino);
}

.micm-detail-title span {
    color: #596129;
    font-weight: 700;
}

.micm-detail-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(115px, 1fr));
    gap: 1px;
    margin-bottom: 8px;
    background: var(--linea);
    border: 1px solid var(--linea);
}

.micm-detail-grid > div {
    display: grid;
    gap: 3px;
    padding: 8px;
    background: #fff;
}

.micm-detail-grid strong {
    color: #3d4544;
    font-size: 11px;
}

@media (max-width: 760px) {
    .gap-curve-panel {
        inset: 12px;
        width: calc(100% - 24px);
        max-height: calc(100vh - 24px);
    }

    .gap-curve {
        padding: 10px;
    }

    .gap-curve-row {
        grid-template-columns: 36px minmax(90px, 1fr) 125px;
        gap: 8px;
    }

    .gap-curve-value strong {
        font-size: 11px;
    }

    .micm-section {
        overflow: hidden;
    }

    .micm-detalle-encabezado {
        flex-direction: column;
    }

    .micm-detalle-encabezado .btn {
        width: 100%;
    }

    .micm-detalle-contenido {
        padding: 10px;
    }

    .micm-heading,
    .micm-detail-title {
        flex-direction: column;
    }

    .micm-source {
        white-space: normal;
    }

    .micm-heading h3 {
        overflow-wrap: anywhere;
    }

    .micm-summary {
        grid-template-columns: repeat(2, minmax(110px, 1fr));
    }

    .micm-summary > div:nth-child(2) {
        border-right: 0;
    }

    .micm-summary > div:nth-child(-n+2) {
        border-bottom: 1px solid var(--linea);
    }

    .micm-detail-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
}

@media (max-width: 1180px) {
    .gap-controls,
    .gap-summary,
    .gap-visual {
        grid-template-columns: 1fr;
    }

    .gap-mode-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .gap-national-average-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .gap-mode-selector {
        grid-template-columns: 1fr;
    }

    .gap-national-average-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .gap-national-average-values {
        grid-template-columns: 1fr;
    }

    .gap-level-distribution-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .gap-level-distribution-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .gap-level-value {
        grid-column: 2;
    }

}