/**
 * simulador-pensiones-vs-indexados.css
 * Estilos específicos del simulador Plan de Pensiones vs. Fondo Indexado.
 * calcularrentabilidad.es
 */


/* ═══════════════════════════════════════════
   1. SECCIÓN DE RESULTADOS — visibilidad
═══════════════════════════════════════════ */
.sim-results-section {
    display: none !important;
    background: var(--color-bg-deep);
    border-top: 3px solid var(--color-accent);
    padding: var(--space-10) 0 var(--space-12);
    animation: crrPensionesResultsIn 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.sim-results-section.is-visible {
    display: block !important;
}

@keyframes crrPensionesResultsIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════
   2. VEREDICTO — a ancho completo dentro de
   la sección de resultados (mismo patrón que
   amortizar-vs-invertir)
═══════════════════════════════════════════ */
.sim-veredicto {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    transition: background 0.3s, border-color 0.3s;
}

.sim-veredicto--amort {
    background: rgba(0, 200, 150, 0.08);
    border-color: var(--color-accent);
}

.sim-veredicto--invest {
    background: rgba(232, 168, 56, 0.1);
    border-color: var(--color-gold, #E8A838);
}

.sim-veredicto__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.sim-veredicto--amort .sim-veredicto__icon {
    background: rgba(0, 200, 150, 0.15);
    color: var(--color-accent);
}

.sim-veredicto--invest .sim-veredicto__icon {
    background: rgba(232, 168, 56, 0.15);
    color: var(--color-gold, #E8A838);
}

.sim-veredicto__titulo {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
    line-height: 1.35;
}

.sim-veredicto__subtitulo {
    font-size: var(--text-sm);
    color: var(--color-muted);
    line-height: 1.5;
}

/* Dentro de la sección de resultados: ancho completo,
   más aire. El borde de color SE MANTIENE (heredado de
   .sim-veredicto--amort/--invest) para que coincida con
   el diseño de amortizar-vs-invertir. */
.sim-results-section .sim-veredicto {
    align-items: center;
    gap: var(--space-4);
    padding: 10px;
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
    .sim-results-section .sim-veredicto {
        flex-direction: column;
        text-align: center;
    }
}


/* ═══════════════════════════════════════════
   3. DOS COLUMNAS LADO A LADO
═══════════════════════════════════════════ */
.sim-dual-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.sim-dual-col {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.sim-dual-col__header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.sim-dual-col--amort .sim-dual-col__header svg { color: var(--color-accent); }
.sim-dual-col--invert .sim-dual-col__header svg { color: var(--color-gold, #E8A838); }

.sim-kpi--invest .sim-kpi__value { color: var(--color-gold, #E8A838); }

/* Dentro de la sección de resultados: caja con más
   separación y gap mayor entre columnas */
.sim-results-section .sim-dual-kpis {
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    align-items: start;
}

.sim-results-section .sim-dual-col {
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--color-navy);
}

.sim-results-section .sim-dual-col__header {
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-2);
}


/* ── KPI dentro de columna: etiqueta arriba, valor abajo ── */
.sim-results-section .sim-dual-col .sim-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
    border-radius: 0;
    padding: var(--space-3) 0;
    text-align: left;
    gap: 2px;
}

.sim-results-section .sim-dual-col .sim-kpi:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sim-results-section .sim-dual-col .sim-kpi__label {
    font-size: var(--text-xs);
    color: rgba(255,255,255,.55);
    text-align: left;
    line-height: 1.3;
    order: 1;
}

.sim-results-section .sim-dual-col .sim-kpi__value {
    /* Este simulador tiene 5 KPIs por columna (frente a 3 en
       amortizar-vs-invertir), así que el tamaño se reduce un
       punto para que no compita visualmente con el veredicto
       de arriba y la columna no quede desproporcionada */
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0;
    order: 2;
}

.sim-results-section .sim-dual-col--amort .sim-kpi__value {
    color: var(--color-accent);
}

.sim-results-section .sim-dual-col--invert .sim-kpi__value {
    color: var(--color-gold, #E8A838);
}

/* KPIs destacados (capital bruto, neto final) */
.sim-results-section .sim-dual-col .sim-kpi--accent {
    background: rgba(0,200,150,.1);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-3);
    margin: 0 calc(-1 * var(--space-2));
    border-bottom: 1px solid rgba(0,200,150,.2);
}

.sim-results-section .sim-dual-col .sim-kpi--invest {
    background: rgba(232,168,56,.1);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-3);
    margin: 0 calc(-1 * var(--space-2));
    border-bottom: 1px solid rgba(232,168,56,.2);
}

/* KPI de tipo medio efectivo: tono neutro, es un dato
   fiscal de referencia, no una ganancia ni un coste */
.sim-kpi--fiscal .sim-kpi__value {
    color: rgba(255,255,255,.7);
    font-weight: 600;
}

@media (max-width: 768px) {
    .sim-results-section .sim-dual-kpis { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .sim-dual-kpis { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════
   4. GRÁFICO — dentro de resultados
═══════════════════════════════════════════ */
.sim-results-section .sim-chart-wrap canvas {
    max-height: 380px;
}

/* Panel oscuro, mismo estilo que el gráfico del simulador de hipoteca */
.sim-chart-wrap--dark {
    background: var(--color-navy);
    border-color: rgba(255,255,255,.1);
}
.sim-chart-wrap--dark .sim-chart-title {
    color: rgba(255,255,255,.85);
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* ═══════════════════════════════════════════
   5. SELECT DE TRAMO MARGINAL
═══════════════════════════════════════════ */
select.sim-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 14px;
    padding-right: calc(var(--space-3) * 2 + 14px);
    cursor: pointer;
}
select.sim-input:focus {
    outline: none;
    border-color: var(--color-accent);
}
.sim-field select.sim-input {
    white-space: normal;
    text-overflow: ellipsis;
    overflow: hidden;
}


/* ═══════════════════════════════════════════
   6. HINT SECUNDARIO EN LABELS
═══════════════════════════════════════════ */
.sim-label .sim-label__hint {
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--color-muted);
    text-transform: none;
    letter-spacing: normal;
}


/* ═══════════════════════════════════════════
   7. NOTA METODOLÓGICA BAJO EL GRÁFICO
═══════════════════════════════════════════ */
.sim-chart-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt, #F8FAFC);
    border: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-muted);
    line-height: 1.5;
}
.sim-chart-note svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--color-muted);
}


/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .sim-results-section { padding: var(--space-8) 0; }
}
@media (max-width: 480px) {
    .sim-rentabilidad-presets { gap: var(--space-1); }
    select.sim-input { font-size: var(--text-sm); }
}

/* ─── Tabla referencia sidebar ─── */
.sim-irpf-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-xs);
    margin-top: var(--space-2);
}

.sim-irpf-table th {
    text-align: left;
    font-weight: 600;
    color: var(--color-muted);
    padding: 4px 0;
    border-bottom: 1px solid var(--color-border);
}

.sim-irpf-table td {
    padding: 5px 0;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}

.sim-irpf-table tr:last-child td {
    border-bottom: none;
}

.sim-irpf-table td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--color-navy);
}

/* ═══════════════════════════════════════════
   TARJETAS INLINE SEO
═══════════════════════════════════════════ */

/* ── Ahorro fiscal por tramo ── */
.pvi-tramos-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
}
@media (max-width: 768px) {
    .pvi-tramos-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .pvi-tramos-grid { grid-template-columns: repeat(2, 1fr); }
}
.pvi-tramo-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-4) var(--space-2);
    border-radius: var(--radius-md);
    background: #F1F5F9;
    text-align: center;
}
.pvi-tramo-cell--highlight {
    background: rgba(0,200,150,.09);
}
.pvi-tramo-cell__bracket {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pvi-tramo-cell__saving {
    font-family: var(--font-head);
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--color-navy);
    line-height: 1.1;
}
.pvi-tramo-cell--highlight .pvi-tramo-cell__saving {
    color: var(--color-accent-dim);
}
.pvi-tramo-cell__note {
    font-size: 10px;
    color: var(--color-muted);
    margin: 0;
    max-width: 100%;
}

/* ── Split tributación fondo vs plan ── */
.pvi-tax-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 600px) {
    .pvi-tax-split { grid-template-columns: 1fr; }
}
.pvi-tax-col {
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.pvi-tax-col__title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.pvi-tax-col__title--fund  { color: var(--color-accent-dim); }
.pvi-tax-col__title--plan  { color: #DC2626; }
.pvi-tax-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    border-bottom: 1px solid rgba(0,0,0,.04);
    color: var(--color-muted);
}
.pvi-tax-row:last-of-type { border-bottom: none; }
.pvi-tax-row strong {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--color-navy);
    white-space: nowrap;
}
.pvi-tax-col__note {
    font-size: 11px;
    color: var(--color-muted);
    margin-top: var(--space-3);
    line-height: 1.4;
    max-width: 100%;
}

/* ── Colores TER ── */
.pvi-ter--high { color: #DC2626; }
.pvi-ter--mid  { color: #B45309; }
.pvi-ter--low  { color: var(--color-accent-dim); }

/* ── sim-returns-grid reutilizado ── */
.sim-returns-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(0,0,0,.05);
}
.sim-return-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    border-bottom: 1px solid rgba(0,0,0,.04);
    background: #fff;
}
.sim-return-row:last-child { border-bottom: none; }
.sim-return-row:nth-child(even) { background: #FAFBFD; }
.sim-return-row__asset { color: var(--color-muted); }
.sim-return-row__val {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: var(--text-sm);
    white-space: nowrap;
    color: var(--color-navy);
}