/* ==========================================================================
   Component: Dashboard main section styling (.dashboard-section)
   ========================================================================== */
.dashboard-section {
    display: block;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 16px;
}

.dashboard-section__header {
    border-bottom: none;
    padding-bottom: 0;
}

.dashboard-section__icon {
    width: 32px;
    height: 32px;
}

.dashboard-section__icon-wrapper {
    width: 38px;
    height: 38px;
    background-color: var(--bg-light-blue);
    color: var(--bg-navy);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.dashboard-section__icon-wrapper--circle {

    display: flex;
    width: 32px;
    height: 32px;

    justify-content: center;
    align-items: center;
    gap: 10px;

    border-radius: 8px;
    border: 1px solid var(--Tertreary-Default-Stroke, #CAE0FF);
    background: var(--Tertreary-Default-Surface, #CAE0FF);
}

.dashboard-section__icon-wrapper--blue {
    background-color: #CAE0FF;
    color: var(--btn-blue);
}

.dashboard-section__icon-wrapper--transparent {
    border: 1px solid transparent !important;
    background: transparent !important;

}

.dashboard-section__title {
    color: var(--Color, #183277);
    /* H3 */
    font-family: 'Roboto';
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 23px;
    /* 104.545% */
}

/* ==========================================================================
   Component: Metadata Row (.meta-row)
   ========================================================================== */
.meta-row {
    display: flex;
    flex-wrap: wrap;
    background-color: #ffffff;
    border: 1px solid var(--Scale-Gray-100);
    border-radius: 8px;
    overflow: hidden;
}

.meta-row__item {
    flex: 1 1 0%;
    padding: 16px 20px;
    border-right: 1px solid var(--Scale-Gray-100);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.meta-row__item:last-child {
    border-right: none;
}

.meta-row__label {
    display: block;
    margin-bottom: 4px;
    color: var(--Primary, #100F15);
    /* Helper */
    font-family: 'Roboto';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 133.333% */
}

.meta-row__value {
    color: var(--Primary, #100F15);
    /* H3 */
    font-family: 'Roboto';
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 23px;
    /* 104.545% */
}

.meta-row__help-btn {
    color: var(--text-secondary);
    font-size: 14px;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s;
    line-height: 1;

    border-radius: 4px;
    border: 1px solid var(--Scale-Gray-100, #DBDBDB);
    background: var(--Scale-Gray-50, #F8F9FA);

}

.bi.bi-question-square {
    color: var(--gray-900, #333333);
}

.meta-row__help-btn:hover {
    opacity: 1;
    color: var(--btn-blue);
}

@media (max-width: 767px) {
    .meta-row {
        flex-direction: column;
    }

    .meta-row__item {
        flex: 1 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--Scale-Gray-100);
    }

    .meta-row__item:last-child {
        border-bottom: none;
    }
}

/* ==========================================================================
   Component: KPI Cards (.kpi-card)
   ========================================================================== */
.kpi-card {
    background-color: #ffffff;
    border: 1px solid var(--Scale-Gray-100);
    border-radius: 8px;
    padding: 16px;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.kpi-card--highlighted {

    border-radius: 8px;
    border: 1px solid var(--Semantics-Red-900, #E5004C);
    background: var(--Semantics-Red-50, #FFFAFB);
    /* Vibrant pinkish-red border */

}

.kpi-card__label {

    display: block;
    margin-bottom: 6px;

    color: var(--Primary, #100F15);

    /* Helper */
    font-family: 'Roboto';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 133.333% */
}

.kpi-card__value-wrapper {
    margin-bottom: 6px;
}

.kpi-card__value {

    color: var(--Primary, #100F15);

    /* H3 */
    font-family: 'Roboto';
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 23px;
    /* 104.545% */
}

.kpi-card__trend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
}

.kpi-card__trend i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}

.kpi-card__trend--growth {
    color: #198754;
    /* Green */
}

.kpi-card__trend--growth i {
    background-color: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.kpi-card__trend--decrease {
    color: #DC3545;
    /* Red */
}

.kpi-card__trend--decrease i {
    background-color: rgba(220, 53, 69, 0.12);
    color: #DC3545;
}

.kpi-card__trend-percent {
    font-weight: 500;
}

.kpi-card__trend-text {
    color: var(--text-secondary);

    /* Helper */
    font-family: 'Roboto';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 133.333% */
}

.kpi-card__help-btn {
    color: var(--text-secondary);
    font-size: 16px;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s;
    line-height: 1;
}

.kpi-card__help-btn:hover {
    opacity: 1;
    color: var(--btn-blue);
}

.kpi-card__footer {

    padding-top: 16px;
    margin-top: auto;
}

.kpi-card__footer-icon {
    font-size: 14px;
    color: var(--text-secondary);
    opacity: 0.8;
}

.kpi-card__footer-text {

    color: var(--Secondary, #5F6071);

    /* Data helper */
    font-family: 'Roboto';
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    /* 10px */
}

.kpi-card__footer-link {
    color: var(--Links, #0E6EFC);

    /* Data helper */
    font-family: 'Roboto';
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.kpi-card__footer-link:hover {
    color: #0754cc;
    text-decoration: underline;
}

/* ==========================================================================
   Component: Summary Cards (Table and Map containers)
   ========================================================================== */
.summary-card {
    background-color: #ffffff;
    border: 1px solid var(--Scale-Gray-100);
    border-radius: 8px;
    padding: 24px;

    display: flex;
    flex-direction: column;
}

.summary-card__header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 12px;
}

.summary-card__title {
    color: var(--Typography-primary, #262323);

    /* Text sm bold */
    font-family: 'Roboto';
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    /* 128.571% */
}

.summary-card__total {
    color: var(--Primary, #100F15);
    text-align: right;

    /* H3 */
    font-family: 'Roboto';
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 23px;
    /* 104.545% */
}

.summary-card__footer {
    margin-top: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 16px;
}

.summary-card__footer-icon {
    font-size: 14px;
    color: var(--text-secondary);
    opacity: 0.8;
}

.summary-card__footer-text {

    color: var(--Typography-secondary, #7C7C7C);
    text-align: right;

    /* Data helper */
    font-family: 'Roboto';
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    /* 10px */
}

.summary-card__footer-link {
    color: var(--btn-blue);
    text-decoration: none;
}

.summary-card__footer-link:hover {
    color: #0754cc;
    text-decoration: underline;
}

/* ==========================================================================
   Component: Summary Table (.summary-table)
   ========================================================================== */
.summary-table {
    border-collapse: collapse;
}

.summary-table th {
    padding: 10px 8px;
    border-bottom: 1px solid var(--Scale-Gray-100);
    background: var(--primary-base, #0f69c4);
    color: white;
    font-family: 'Roboto';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.summary-table td {

    padding: 10px 8px;
    border-bottom: 1px solid var(--Scale-Gray-100, #DBDBDB) !important;

    color: var(--Secondary, #5F6071);

    /* Helper */
    font-family: 'Roboto';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 133.333% */
}

.summary-table tbody tr:hover {
    background-color: rgba(14, 110, 252, 0.02);
}

.summary-table__filter-row.is-active {
    background-color: rgba(15, 105, 196, 0.09);
}

.summary-table__filter-button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 2px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.summary-table__filter-button:hover,
.summary-table__filter-button:focus-visible,
.summary-table__filter-button[aria-pressed="true"] {
    color: #0051a8;
    text-decoration: underline;
}

.summary-table__total-row {
    background-color: var(--gray-50, #f2f2f2) !important;
}

.summary-table__total-row td {

    border-bottom: 1px solid var(--Scale-Gray-100, #DBDBDB);

    background-color: var(--gray-50, #f2f2f2) !important;
    padding-top: 12px;
    padding-bottom: 12px;

    color: var(--Primary, #100F15);

    /* Helper */
    font-family: 'Roboto';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 133.333% */
}

.summary-table__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50% !important;
    vertical-align: middle;
}

/* Commune color dots styling */
.summary-table__dot--valdivia {
    background-color: var(--primary-base, #0f69c4);
}

.summary-table__dot--corral {
    background-color: #FF3366;
}

.summary-table__dot--lanco {
    background-color: #198754;
}

.summary-table__dot--los-lagos {
    background-color: #FF9800;
}

.summary-table__dot--mafil {
    background-color: #6C757D;
}

.summary-table__dot--mariquina {
    background-color: #8BC34A;
}

.summary-table__dot--paillaco {
    background-color: #FFC107;
}

.summary-table__dot--panguipulli {
    background-color: var(--primary-blue-900, #00135a);
}

.map-container {
    position: relative;
    border: 1px solid var(--Scale-Gray-100);
    background-color: #ffffff !important;
}

.map-container__silhouette {
    display: block;
    width: 100%;
    height: auto;
    background-color: #ffffff;
}

.map-container__dot {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 5;
    transition: transform 0.2s ease;
}

.map-container__dot:hover {
    transform: translate(-50%, -50%) scale(1.3);
}

/* Dot color modifiers matching commune palette */
.map-container__dot--valdivia {
    background-color: var(--primary-base, #0f69c4);
}

.map-container__dot--corral {
    background-color: #FF3366;
}

.map-container__dot--lanco {
    background-color: #198754;
}

.map-container__dot--los-lagos {
    background-color: #FF9800;
}

.map-container__dot--mafil {
    background-color: #6C757D;
}

.map-container__dot--mariquina {
    background-color: #8BC34A;
}

.map-container__dot--paillaco {
    background-color: #FFC107;
}

.map-container__dot--panguipulli {
    background-color: var(--primary-blue-900, #00135a);
}

/* Position modifiers for EE Map Dots */
.map-container__dot--pos-ee-valdivia {
    top: 40%;
    left: 30%;
}

.map-container__dot--pos-ee-corral {
    top: 55%;
    left: 20%;
}

.map-container__dot--pos-ee-lanco {
    top: 28%;
    left: 55%;
}

.map-container__dot--pos-ee-los-lagos {
    top: 60%;
    left: 52%;
}

.map-container__dot--pos-ee-mafil {
    top: 45%;
    left: 50%;
}

.map-container__dot--pos-ee-mariquina {
    top: 32%;
    left: 42%;
}

.map-container__dot--pos-ee-paillaco {
    top: 72%;
    left: 42%;
}

.map-container__dot--pos-ee-panguipulli {
    top: 52%;
    left: 75%;
}

/* Position modifiers for JISC Map Dots */
.map-container__dot--pos-jisc-valdivia {
    top: 42%;
    left: 32%;
}

.map-container__dot--pos-jisc-corral {
    top: 52%;
    left: 22%;
}

.map-container__dot--pos-jisc-lanco {
    top: 32%;
    left: 58%;
}

.map-container__dot--pos-jisc-los-lagos {
    top: 57%;
    left: 50%;
}

.map-container__dot--pos-jisc-mafil {
    top: 40%;
    left: 52%;
}

.map-container__dot--pos-jisc-mariquina {
    top: 35%;
    left: 38%;
}

.map-container__dot--pos-jisc-paillaco {
    top: 68%;
    left: 45%;
}

.map-container__dot--pos-jisc-panguipulli {
    top: 48%;
    left: 70%;
}

.map-zoom-controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}

.map-zoom-btn {
    width: 24px;
    height: 24px;
    border: none;
    outline: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    transition: opacity 0.2s ease;
}

.map-zoom-btn:hover {
    opacity: 0.9;
}

.map-zoom-btn--plus {
    background-color: var(--btn-blue) !important;
    color: #ffffff !important;
}

.map-zoom-btn--minus {
    background-color: #F1F5F9 !important;
    color: var(--text-secondary) !important;
}

/* ==========================================================================
   Responsive Utilities & Layout Hacks
   ========================================================================== */
@media (min-width: 1200px) {
    .row-cols-lg-5>* {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

/* ==========================================================================
   Component: KPI Group Cards (.kpi-group-card)
   ========================================================================== */
.kpi-group-card {
    background-color: #ffffff;
    border: 1px solid var(--Scale-Gray-100);
    border-radius: 8px;
    overflow: hidden;
}

.kpi-group-card__col {
    border-right: 1px solid var(--Scale-Gray-100);
}

.kpi-group-card__col:last-child {
    border-right: none;
}

.kpi-group-card__item {
    padding: 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kpi-group-card__label {

    display: block;
    margin-bottom: 4px;

    color: var(--Primary, #100F15);

    /* Helper */
    font-family: 'Roboto';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    /* 133.333% */
}

.kpi-group-card__value-wrapper {
    margin-bottom: 4px;
}

.kpi-group-card__value {
    color: var(--Primary, #100F15);
    /* H3 */
    font-family: 'Roboto';
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 23px;
    /* 104.545% */
}

.kpi-group-card__trend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
}

.kpi-group-card__trend i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}

.kpi-group-card__trend--growth {
    color: #30A863;
}

.kpi-group-card__trend--growth i {
    background-color: rgba(48, 168, 99, 0.12);
    color: #30A863;
}

.kpi-group-card__trend--decrease {
    color: #E5004C;
}

.kpi-group-card__trend--decrease i {
    background-color: rgba(229, 0, 76, 0.12);
    color: #E5004C;
}

.kpi-group-card__trend-percent {
    font-weight: 500;
}

.kpi-group-card__trend-text {
    color: var(--Secondary, #5F6071);

    /* Helper */
    font-family: 'Roboto';
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.kpi-group-card__footer {
    margin-top: auto;
}

.kpi-group-card__footer-icon {
    font-size: 14px;
    color: var(--text-secondary);
    opacity: 0.8;
}

.kpi-group-card__footer-text {
    font-family: 'Roboto', sans-serif;
    font-size: 11px;
    color: var(--gray-900, #333333);
    font-weight: 500;
}

.kpi-group-card__footer-link {
    color: var(--btn-blue);
    text-decoration: none;
}

.kpi-group-card__footer-link:hover {
    color: #0754cc;
    text-decoration: underline;
}

/* ==========================================================================
   Responsive Centering and Mobile Adaptations
   ========================================================================== */
@media (max-width: 991px) {
    .kpi-group-card__col {
        border-right: none;
        border-bottom: 1px solid var(--Scale-Gray-100);
    }

    .kpi-group-card__col:nth-child(2n) {
        border-right: none;
    }

    .kpi-group-card__col:last-child {
        border-bottom: none;
    }
}

@media (max-width: 767px) {
    .meta-row__item {
        text-align: center;
        align-items: center;
    }

    .meta-row__item .d-flex.justify-content-between {
        flex-direction: column;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px;
    }

    .meta-row__item .d-flex.flex-column {
        align-items: center !important;
    }

    .kpi-card {
        text-align: center;
        align-items: center;
    }

    .kpi-card__trend {
        justify-content: center;
    }

    .kpi-card__footer {
        justify-content: center;
        width: 100%;
    }

    .kpi-group-card__item {
        text-align: center;
        align-items: center;
    }

    .kpi-group-card__trend {
        justify-content: center;
    }

    .kpi-group-card__footer {
        justify-content: center;
        width: 100%;
    }
}

/* ==========================================================================
   Component: ENEP Tabs Navigation (.enep-tabs)
   ========================================================================== */
.enep-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 32px 0;
}

.enep-tabs__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 8px 16px;
    background-color: #ffffff;
    border: 1px solid var(--primary-darken-1, #0051a8);
    border-radius: 0;
    text-decoration: none;
    color: var(--primary-darken-1, #0051a8);
    font-family: 'Roboto';
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    transition: all 0.2s ease-in-out;
}

.enep-tabs__btn:hover {
    background-color: var(--primary-blue-50, #f1f6fb);
    color: var(--primary-darken-1, #0051a8);
}

.enep-tabs__btn--active {
    background-color: var(--primary-darken-1, #0051a8) !important;
    border-color: var(--primary-darken-1, #0051a8) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Component: "Ver video" Button (.btn-ver-video)
   ========================================================================== */
.btn-ver-video {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 12px 20px;
    background-color: #ffffff;
    border: 1px solid var(--primary-darken-1, #0051a8);
    border-radius: 0;
    color: var(--primary-darken-1, #0051a8);
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-ver-video:hover {
    background-color: var(--primary-blue-50, #f1f6fb);
    color: var(--primary-darken-1, #0051a8);
}

.enep-legend__line--dashed {
    border-top: 2px dashed;
}

/* Height modifier classes for ENEP inline SVGs to avoid inline style attributes */
.enep-chart-wrapper--line {
    height: 220px;
}

.enep-chart-wrapper--bar {
    min-height: 460px;
    height: 100%;
}

.dashboard-leaflet-map {
    width: 100%;
    height: 280px;
    min-height: 280px;
    background: #f8fafc;
}

.leaflet-container {
    font-family: inherit;
}

.leaflet-container .idea-map-tiles-grayscale {
    filter: grayscale(1) brightness(1.08) contrast(0.88);
}

.idea-map-fullscreen-control .idea-map-fullscreen-button,
.idea-map-reset-control .idea-map-reset-button {
    display: flex;
    width: 30px;
    height: 30px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 2px;
    background: #ffffff;
    color: #1f2937;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}

.idea-map-fullscreen-control .idea-map-fullscreen-button:hover,
.idea-map-fullscreen-control .idea-map-fullscreen-button:focus-visible,
.idea-map-reset-control .idea-map-reset-button:hover,
.idea-map-reset-control .idea-map-reset-button:focus-visible {
    background: #f1f5f9;
    color: #0051a8;
}

.dashboard-leaflet-map:fullscreen,
.dashboard-leaflet-map:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    background: #f8fafc;
}

.idea-map-accessible-list {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dashboard-map-pin {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.35);
}

.summary-card {
    min-height: 500px;
    height: 100%;
}

.summary-card__top {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.map-container {
    flex: 1;
    min-height: 280px;
}

.dashboard-leaflet-map {
    width: 100%;
    height: 100%;
    min-height: 280px;
}

/* ==========================================================================
   KPI color states from database
   color_card: 0 = default, 1 = green, 2 = red
   color_indicador: 0 = neutral, 1 = green, 2 = red
   ========================================================================== */

/* Standard KPI card: color_card = 1 */
.kpi-card--success,
.kpi-card--green {
    border-color: var(--Semantics-Green-700, #30A863);
    background-color: var(--Semantics-Green-50, #F3FCF7);
}

/* Standard KPI card: color_card = 2 */
.kpi-card--highlighted,
.kpi-card--danger,
.kpi-card--red {
    border-color: var(--Semantics-Red-900, #E5004C);
    background-color: var(--Semantics-Red-50, #FFFAFB);
}

/* Grouped KPI item: color_card = 1 */
.kpi-group-card__item--success {
    background-color: var(--Semantics-Green-50, #F3FCF7);
    box-shadow: inset 0 0 0 1px var(--Semantics-Green-700, #30A863);
    border-radius: 8px;
}

/* Grouped KPI item: color_card = 2 */
.kpi-group-card__item--danger {
    background-color: var(--Semantics-Red-50, #FFFAFB);
    box-shadow: inset 0 0 0 1px var(--Semantics-Red-900, #E5004C);
    border-radius: 8px;
}

/* Neutral variation: color_indicador = 0 or empty */
.kpi-card__trend--neutral,
.kpi-group-card__trend--neutral {
    color: var(--Secondary, #5F6071);
}

/* Direction only. The arrow color continues to come from color_indicador. */
.indicator-variation--up .indicator-variation-icon,
.indicator-variation--down .indicator-variation-icon {
    flex: 0 0 auto;
}

/* ==========================================================================
   KPI group con 1 o 2 cards
   El contenedor exterior no marca todo el ancho.
   Cada card mantiene el 25% y queda alineada a la izquierda.
   ========================================================================== */

.kpi-group-card:has(
    > .row > .kpi-group-card__col:first-child:nth-last-child(-n + 2)
) {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

/* Quitar los divisores del contenedor exterior */
.kpi-group-card:has(
    > .row > .kpi-group-card__col:first-child:nth-last-child(-n + 2)
)
    > .row
    > .kpi-group-card__col {
    border-right: 0;
}

/* Cada card conserva su propio borde */
.kpi-group-card:has(
    > .row > .kpi-group-card__col:first-child:nth-last-child(-n + 2)
)
    .kpi-group-card__item {
    background-color: #ffffff;
    border: 1px solid var(--Scale-Gray-100, #DBDBDB);
    border-radius: 8px;
}

/* Separación entre las dos cards */
.kpi-group-card:has(
    > .row > .kpi-group-card__col:first-child:nth-last-child(-n + 2)
)
    > .row {
    column-gap: 0;
}

/* Estados definidos desde color_card */
.kpi-group-card:has(
    > .row > .kpi-group-card__col:first-child:nth-last-child(-n + 2)
)
    .kpi-group-card__item--success {
    border-color: var(--Semantics-Green-700, #30A863);
}

.kpi-group-card:has(
    > .row > .kpi-group-card__col:first-child:nth-last-child(-n + 2)
)
    .kpi-group-card__item--danger {
    border-color: var(--Semantics-Red-900, #E5004C);
}