.sim-card-wrapper {
    width: min(100%, 1120px);
    margin: 0 auto;
    color: #f5f5f7;
    font-family: "Inter", "Plus Jakarta Sans", sans-serif
}

.sim-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 64px;
    padding: 8px 9px 8px 17px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 18px;
    background: rgba(12, 12, 16, .78);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .045);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px)
}

.sim-tab-group {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(0, 0, 0, .2);
    width: 100%;
    justify-content: space-between
}

.sim-metric-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 37px;
    padding: 0 11px;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #74747e;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color .28s ease, background .28s ease, border-color .28s ease, transform .28s ease;
    flex: 1
}

.sim-metric-btn svg {
    width: 14px;
    height: 14px
}

.sim-metric-btn:hover {
    color: #dddde5;
    background: rgba(255, 255, 255, .045)
}

.sim-metric-btn:active {
    transform: scale(.97)
}

.sim-metric-active {
    color: #f5f5f7;
    border-color: rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04)
}

.sim-analytics-window {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 25px;
    background: #0c0c10;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .42)
}

.sim-dashboard {
    display: block
}

.sim-main {
    min-width: 0;
    padding: 24px;
    background: radial-gradient(circle at 88% 0%, rgba(139, 124, 255, .07), transparent 25rem), #0c0c10
}

.sim-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.sim-overline {
    display: block;
    margin-bottom: 6px;
    color: #686871;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase
}

.sim-dashboard-heading h3 {
    color: #f2f2f5;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.35rem;
    letter-spacing: -.045em
}

.sim-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid rgba(121, 230, 176, .11);
    border-radius: 8px;
    color: #6e9583;
    background: rgba(121, 230, 176, .035);
    font-size: .57rem;
    font-weight: 700
}

.sim-live i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #24ba6f;
    box-shadow: 0 0 10px rgba(121, 230, 176, .7)
}

.sim-summary-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 11px;
    margin-top: 23px
}

.sim-summary-card {
    min-height: 119px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012));
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .35s ease
}

.sim-summary-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .13)
}

.sim-summary-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #777780;
    font-size: .62rem;
    font-weight: 600
}

.sim-summary-icon {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid rgba(139, 124, 255, .15);
    border-radius: 8px;
    color: #aaa2ff;
    background: rgba(139, 124, 255, .07)
}

.sim-summary-icon svg {
    width: 13px;
    height: 13px
}

.sim-summary-value {
    margin-top: 10px;
    color: #f4f4f7;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -.055em
}

.sim-summary-foot {
    display: flex;
    gap: 6px;
    margin-top: 3px;
    color: #575761;
    font-size: .56rem
}

.sim-positive {
    color: #79e6b0;
    font-weight: 700
}

.sim-summary-secondary {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.sim-target-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 5px
}

.sim-target-row strong {
    color: #f2f2f5;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.4rem;
    letter-spacing: -.05em
}

.sim-target-row span {
    color: #5d5d66;
    font-size: .57rem
}

.sim-progress {
    height: 5px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 99px;
    background: #202027
}

.sim-progress span {
    display: block;
    width: 82%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7466ff, #55d6ff);
    box-shadow: 0 0 16px rgba(139, 124, 255, .25);
    transition: width .55s cubic-bezier(.22, 1, .36, 1)
}

.sim-chart-card {
    margin-top: 11px;
    padding: 17px 17px 10px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 15px;
    background: rgba(255, 255, 255, .018);
    overflow: hidden
}

.sim-chart-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.sim-chart-kicker {
    display: block;
    margin-bottom: 4px;
    color: #62626c;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase
}

.sim-chart-heading strong {
    color: #d7d7de;
    font-size: .72rem
}

.sim-chart-total {
    color: #2ba568;
    font-size: .64rem;
    font-weight: 800
}

.sim-chart-area {
    position: relative;
    height: 235px;
    margin-top: 7px
}

.sim-svg-chart {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible
}

.chart-grid-line {
    stroke: rgba(255, 255, 255, .055);
    stroke-width: 1;
    stroke-dasharray: 3 5
}

.chart-label {
    fill: #55555e;
    font-size: 9px;
    font-family: "Inter", sans-serif
}

.chart-line,
.chart-line-green {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: simDrawLine 1.15s cubic-bezier(.22, 1, .36, 1) forwards
}

.chart-line {
    stroke: #9b91ff;
    filter: drop-shadow(0 0 7px rgba(139, 124, 255, .35))
}

.chart-line-green {
    stroke: #79e6b0;
    filter: drop-shadow(0 0 7px rgba(121, 230, 176, .3))
}

.chart-point,
.chart-point-green {
    fill: #0c0c10;
    stroke-width: 2
}

.chart-point {
    stroke: #a79fff
}

.chart-point-green {
    stroke: #79e6b0
}

.chart-bar {
    fill: #7064e9;
    opacity: .85;
    transform-origin: bottom;
    animation: simGrowBar .65s cubic-bezier(.22, 1, .36, 1) both
}

.chart-bar:nth-of-type(2n) {
    opacity: .62
}

.sim-donut-chart {
    position: relative;
    display: grid;
    width: 185px;
    height: 185px;
    margin: 8px auto 0;
    place-items: center
}

.sim-donut-chart svg {
    width: 185px;
    height: 185px;
    overflow: visible
}

.donut-track,
.donut-value {
    fill: none;
    stroke-width: 18
}

.donut-track {
    stroke: #25252d
}

.donut-value {
    stroke: #f1a66a;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px rgba(241, 166, 106, .22))
}

.sim-donut-center {
    position: absolute;
    display: grid;
    place-items: center;
    text-align: center
}

.sim-donut-center strong {
    color: #f2f2f5;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 1.45rem;
    letter-spacing: -.06em
}

.sim-donut-center span {
    color: #64646d;
    font-size: .56rem
}

.sim-donut-legend {
    display: grid;
    width: min(100%, 430px);
    margin: -3px auto 5px;
    gap: 7px
}

.sim-donut-legend div {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    align-items: center;
    gap: 7px;
    color: #676771;
    font-size: .59rem
}

.sim-donut-legend i {
    width: 7px;
    height: 7px;
    border-radius: 2px
}

.legend-optimized {
    background: #f1a66a
}

.legend-remaining {
    background: #25252d
}

.sim-donut-legend b {
    color: #aaaab2;
    font-size: .58rem
}

/* =========================================================
   1. LIENZO Y TARJETAS EN BLANCO (TEMA CLARO INTERNO)
   ========================================================= */

/* Contenedor principal interior */
.sim-main {
    min-width: 0;
    padding: 20px;
    /* background: #ffffff; Lienzo blanco como la simulación izquierda */
    border-radius: 18px;
    margin: 10px;
    color: #111827;
}

/* Títulos y valores en negro/oscuro */
.sim-summary-value,
.sim-target-row strong,
.sim-chart-heading strong,
.sim-donut-center strong {
    color: #0f172a !important;
}

/* Subtítulos, descripciones y etiquetas en gris */
.sim-overline,
.sim-summary-label,
.sim-target-row span,
.sim-chart-kicker,
.sim-summary-foot span,
.sim-donut-center span,
.sim-donut-legend div {
    color: #64748b !important;
}

.sim-donut-legend b {
    color: #0f172a !important;
}

/* Tarjetas internas resumen y gráfica */
.sim-summary-card,
.sim-chart-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sim-summary-card:hover {
    border-color: #cbd5e1;
    transform: translateY(-2px);
}

/* Barra de progreso e icono */
.sim-progress {
    background: #e2e8f0;
}

.sim-summary-icon {
    border-color: rgba(139, 124, 255, 0.3);
    background: rgba(139, 124, 255, 0.12);
}

/* =========================================================
   2. ADAPTACIÓN DE GRÁFICAS SVG AL TEMA CLARO
   ========================================================= */

.chart-grid-line {
    stroke: #e2e8f0;
    /* Líneas de cuadrícula en gris claro */
}

.chart-label {
    fill: #64748b;
    /* Texto de los meses en gris */
}

.donut-track {
    stroke: #e2e8f0;
    /* Pista de la gráfica de dona */
}

/* =========================================================
   3. AJUSTE DE ALTURA Y PROPORCIONES (MISMO TAMAÑO)
   ========================================================= */

.sim-card-wrapper {
    width: 100%;
}

.sim-analytics-window {
    margin-top: 10px;
    border-radius: 22px;
}

.sim-summary-grid {
    margin-top: 14px;
    gap: 10px;
}

.sim-summary-card {
    min-height: 90px;
    padding: 12px;
}

.sim-chart-card {
    margin-top: 10px;
    padding: 14px 14px 8px;
}

/* Altura de la gráfica reducida para recortar el alto vertical */
.sim-chart-area {
    height: 175px;
    margin-top: 4px;
}

.sim-donut-chart {
    width: 155px;
    height: 155px;
    margin: 4px auto 0;
}

.sim-donut-chart svg {
    width: 155px;
    height: 155px;
}

@keyframes simDrawLine {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes simGrowBar {
    from {
        transform: scaleY(0);
        opacity: 0
    }

    to {
        transform: scaleY(1);
        opacity: .85
    }
}

@media(max-width:900px) {
    .sim-header-bar {
        align-items: stretch;
        flex-direction: column
    }

    .sim-tab-group {
        overflow-x: auto;
        scrollbar-width: none
    }

    .sim-tab-group::-webkit-scrollbar {
        display: none
    }

    .sim-metric-btn {
        flex: 1 0 auto
    }

    .sim-main {
        padding: 22px
    }
}

@media(max-width:650px) {
    .sim-analytics-window {
        border-radius: 19px
    }

    .sim-main {
        padding: 16px
    }

    .sim-dashboard-heading h3 {
        font-size: 1.15rem
    }

    .sim-summary-grid {
        grid-template-columns: 1fr
    }

    .sim-chart-area {
        height: 205px
    }

    .sim-chart-card {
        padding-inline: 11px
    }

    .sim-metric-btn {
        min-width: 42px;
        padding-inline: 10px
    }

    .sim-metric-btn span {
        display: none
    }

    .sim-metric-btn svg {
        width: 15px;
        height: 15px
    }
}

@media(max-width:420px) {
    .sim-header-bar {
        padding: 9px
    }

    .sim-tab-group {
        width: 100%;
        justify-content: space-between
    }

    .sim-metric-btn {
        min-height: 35px
    }

    .sim-main {
        padding: 12px
    }

    .sim-chart-area {
        height: 185px
    }
}

@media(prefers-reduced-motion:reduce) {

    .chart-line,
    .chart-line-green,
    .chart-bar {
        animation: none;
        stroke-dashoffset: 0;
        transform: none
    }
}