.dash2 {
    --d2-bg: #f4f6fb;
    --d2-card: #ffffff;
    --d2-line: #e9edf6;
    --d2-ink: #1f2a44;
    --d2-ink-soft: #66718a;
    --d2-ink-mute: #98a2b6;
    --d2-brand: #143dd4;
    --d2-azul: #7fa9ee;
    --d2-menta: #9fd8c0;
    --d2-durazno: #f4b49c;
    --d2-lavanda: #c0b2ef;
    --d2-rosa: #f2bfd3;
    --d2-ambar: #f0d79b;
    --d2-radio: 18px;
    --d2-sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(20, 61, 212, .06);
    background: var(--d2-bg);
    padding: 18px 22px 40px;
    min-height: 100vh;
    font-family: "Source Sans Pro", "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--d2-ink);
    -webkit-font-smoothing: antialiased;
}

.dash2 *,
.dash2 *::before,
.dash2 *::after {
    box-sizing: border-box;
}

.dash2-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.dash2-titulo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dash2-titulo h1 {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--d2-ink);
}

.dash2-titulo span {
    font-size: 13.5px;
    color: var(--d2-ink-mute);
}

.dash2-demo {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fff5e6;
    border: 1px solid #f6dfb6;
    color: #a5741c;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    width: fit-content;
}

.dash2-controles {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.dash2-select {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--d2-card);
    border: 1px solid var(--d2-line);
    border-radius: 12px;
    padding: 0 14px;
    height: 42px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.dash2-select i {
    color: var(--d2-azul);
    font-size: 13px;
}

.dash2-select select {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d2-ink);
    height: 40px;
    padding-right: 4px;
    cursor: pointer;
    max-width: 190px;
}

.dash2-seg {
    display: inline-flex;
    background: #eceffa;
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
}

.dash2-seg-btn {
    border: 0;
    background: transparent;
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--d2-ink-soft);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.dash2-seg-btn:hover {
    color: var(--d2-brand);
}

.dash2-seg-btn.is-active {
    background: var(--d2-card);
    color: var(--d2-brand);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}

.dash2-modo {
    display: inline-flex;
    background: #eceffa;
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
}

.dash2-modo-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: transparent;
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--d2-ink-soft);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.dash2-modo-btn i {
    font-size: 11.5px;
}

.dash2-modo-btn:hover {
    color: var(--d2-ink);
}

.dash2-modo-btn.is-active {
    background: var(--d2-card);
    color: #2f8c6b;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}

.dash2-modo-btn.is-active[data-modo="demo"] {
    background: #fff5e6;
    color: #a5741c;
    box-shadow: inset 0 0 0 1px #f0dcb4;
}

.dash2-demo[hidden] {
    display: none;
}

.dash2-select input {
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d2-ink);
    height: 40px;
    width: 105px;
}

.dash2-fechas {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -4px 0 18px;
}

.dash2-fechas[hidden] {
    display: none;
}

.dash2-fechas-sep {
    font-size: 13px;
    font-weight: 600;
    color: var(--d2-ink-mute);
}

.dash2.esta-cargando .dash2-kpi,
.dash2.esta-cargando .dash2-card {
    opacity: .45;
    pointer-events: none;
}

.dash2-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 190px;
    height: 100%;
    color: var(--d2-ink-mute);
    font-size: 13px;
    text-align: center;
}

.dash2-vacio i {
    font-size: 24px;
    color: #ccd5e8;
}

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

.dash2-kpi {
    background: var(--d2-card);
    border: 1px solid var(--d2-line);
    border-radius: var(--d2-radio);
    box-shadow: var(--d2-sombra);
    padding: 18px 18px 0;
    overflow: hidden;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}

.dash2-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgba(16, 24, 40, .05), 0 16px 34px rgba(20, 61, 212, .1);
}

.dash2-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dash2-kpi-ico {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.dash2-kpi-ico.es-azul {
    background: #eef3fe;
    color: #4f7fd4;
}

.dash2-kpi-ico.es-menta {
    background: #ebf8f3;
    color: #3f9f7d;
}

.dash2-kpi-ico.es-durazno {
    background: #fef2ec;
    color: #d17b4e;
}

.dash2-kpi-ico.es-lavanda {
    background: #f2effd;
    color: #705bc9;
}

.dash2-delta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.dash2-delta.sube {
    background: #ebf8f3;
    color: #2f8c6b;
}

.dash2-delta.baja {
    background: #fdefef;
    color: #c05a5a;
}

.dash2-delta.neutro {
    background: #f0f2f8;
    color: #98a2b6;
}

.dash2-kpi-label {
    margin: 15px 0 2px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--d2-ink-mute);
}

.dash2-kpi-valor {
    font-size: 29px;
    font-weight: 700;
    letter-spacing: -.9px;
    line-height: 1.15;
    color: var(--d2-ink);
}

.dash2-kpi-pie {
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--d2-ink-mute);
}

.dash2-spark {
    height: 52px;
    margin: 6px -18px 0;
}

.dash2-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
}

.dash2-col-4 {
    grid-column: span 4;
}

.dash2-col-5 {
    grid-column: span 5;
}

.dash2-col-6 {
    grid-column: span 6;
}

.dash2-col-7 {
    grid-column: span 7;
}

.dash2-col-8 {
    grid-column: span 8;
}

.dash2-col-12 {
    grid-column: span 12;
}

.dash2-card {
    background: var(--d2-card);
    border: 1px solid var(--d2-line);
    border-radius: var(--d2-radio);
    box-shadow: var(--d2-sombra);
    padding: 20px 22px 16px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.dash2-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.dash2-card-tit {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dash2-card-tit strong {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--d2-ink);
}

.dash2-card-tit span {
    font-size: 12.5px;
    color: var(--d2-ink-mute);
}

.dash2-chip {
    flex-shrink: 0;
    padding: 5px 11px;
    border-radius: 999px;
    background: #eef3fe;
    color: #4f7fd4;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
}

.dash2-chip.es-menta {
    background: #ebf8f3;
    color: #3f9f7d;
}

.dash2-chip.es-durazno {
    background: #fef2ec;
    color: #d17b4e;
}

.dash2-chip.es-lavanda {
    background: #f2effd;
    color: #705bc9;
}

.dash2-chart {
    width: 100%;
    min-height: 240px;
}

.dash2-chart.es-alto {
    min-height: 320px;
}

.dash2-chart.es-bajo {
    min-height: 210px;
}

.dash2-donut-wrap {
    position: relative;
}

.dash2-donut-centro {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    text-align: center;
    pointer-events: none;
}

.dash2-donut-centro span {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--d2-ink-mute);
}

.dash2-donut-centro strong {
    display: block;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.7px;
    color: var(--d2-ink);
}

.dash2-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--d2-line);
}

.dash2-leyenda-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--d2-ink-soft);
}

.dash2-punto {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    flex-shrink: 0;
}

.dash2-leyenda-item b {
    color: var(--d2-ink);
    font-weight: 700;
}

.dash2-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: -18px;
}

.dash2-meta-valor {
    font-size: 27px;
    font-weight: 700;
    letter-spacing: -.8px;
    color: var(--d2-ink);
}

.dash2-meta-texto {
    font-size: 12.5px;
    color: var(--d2-ink-mute);
    text-align: center;
}

.dash2-lista {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash2-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 12px;
    transition: background .16s ease;
}

.dash2-fila:hover {
    background: #f7f9fd;
}

.dash2-pos {
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: #eceffa;
    color: var(--d2-ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.dash2-fila:nth-child(1) .dash2-pos {
    background: #eef3fe;
    color: #4f7fd4;
}

.dash2-fila:nth-child(2) .dash2-pos {
    background: #ebf8f3;
    color: #3f9f7d;
}

.dash2-fila:nth-child(3) .dash2-pos {
    background: #fef2ec;
    color: #d17b4e;
}

.dash2-fila-info {
    flex: 1;
    min-width: 0;
}

.dash2-fila-info strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--d2-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash2-fila-info span {
    font-size: 12px;
    color: var(--d2-ink-mute);
}

.dash2-fila-monto {
    font-size: 14px;
    font-weight: 700;
    color: var(--d2-ink);
    white-space: nowrap;
}

.dash2-barra {
    height: 5px;
    border-radius: 999px;
    background: #eceffa;
    overflow: hidden;
    margin-top: 5px;
}

.dash2-barra i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--d2-azul);
}

@media (max-width: 1400px) {
    .dash2-col-8,
    .dash2-col-7 {
        grid-column: span 12;
    }

    .dash2-col-5,
    .dash2-col-4 {
        grid-column: span 6;
    }
}

@media (max-width: 1100px) {
    .dash2-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash2-col-6 {
        grid-column: span 12;
    }
}

@media (max-width: 820px) {
    .dash2 {
        padding: 14px 14px 32px;
    }

    .dash2-kpis {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash2-col-4,
    .dash2-col-5 {
        grid-column: span 12;
    }

    .dash2-top {
        align-items: stretch;
    }

    .dash2-controles {
        width: 100%;
    }

    .dash2-seg {
        width: 100%;
    }

    .dash2-seg-btn {
        flex: 1;
        padding: 8px 6px;
    }

    .dash2-select {
        flex: 1;
    }

    .dash2-select select {
        max-width: none;
        width: 100%;
    }
}

.dash2-meta-config {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dash2-meta-config label {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--d2-ink-mute);
}

.dash2-pct {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--d2-card);
    border: 1px solid var(--d2-line);
    border-radius: 10px;
    padding: 0 10px;
    height: 36px;
}

.dash2-pct input {
    width: 62px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: var(--d2-ink);
    text-align: right;
}

.dash2-pct span {
    font-size: 13px;
    font-weight: 700;
    color: var(--d2-ink-mute);
}

.dash2-pct-btn {
    border: 0;
    border-radius: 10px;
    height: 36px;
    padding: 0 16px;
    background: #eef3fe;
    color: #3f6fc9;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.dash2-pct-btn:hover {
    background: #dfe9fc;
}

.dash2-pct-btn:disabled {
    opacity: .55;
    cursor: default;
}

.dash2-meta-cuerpo {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 26px;
    align-items: center;
}

.dash2-meta-gauge {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash2-meta-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.dash2-stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f7f9fd;
    border: 1px solid var(--d2-line);
}

.dash2-stat span {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--d2-ink-mute);
}

.dash2-stat strong {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--d2-ink);
}

.dash2-stat.es-bien {
    background: #edf9f4;
    border-color: #cdebe0;
}

.dash2-stat.es-bien strong {
    color: #2f8c6b;
}

.dash2-stat.es-mal {
    background: #fdf1f1;
    border-color: #f2d6d6;
}

.dash2-stat.es-mal strong {
    color: #c05a5a;
}

@media (max-width: 1400px) {
    .dash2-meta-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .dash2-meta-cuerpo {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash2-meta-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .dash2-meta-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash2-meta-config {
        width: 100%;
    }
}

.dash2-modo[hidden] {
    display: none;
}