/**
 * simulador-comprar-vs-alquilar.css
 * Estilos específicos del simulador Comprar vs. Alquilar Vivienda.
 * calcularrentabilidad.es
 *
 * Cargado DESPUÉS de simulador.css.
 * Prefijo .cva-* para todo lo exclusivo de esta página.
 */


/* ─────────────────────────────────────────────
   HERO
───────────────────────────────────────────── */
.cva-hero .sim-hero__inner {
    align-items: start;
}

.cva-versus {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
}

.cva-versus__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 12px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    border: 1.5px solid transparent;
}

.cva-versus__item--buy {
    background: rgba(0, 200, 150, 0.12);
    border-color: rgba(0, 200, 150, 0.3);
    color: var(--color-accent);
}

.cva-versus__item--rent {
    background: rgba(232, 168, 56, 0.12);
    border-color: rgba(232, 168, 56, 0.3);
    color: var(--color-gold, #E8A838);
}

.cva-versus__divider {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.35);
    padding: 0 2px;
}

.sim-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.sim-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 4px 10px;
}

.sim-trust-badge svg { color: var(--color-accent); flex-shrink: 0; }


/* ─────────────────────────────────────────────
   PANEL — nueva estructura con stepper
───────────────────────────────────────────── */
.cva-panel .sim-panel__body {
    padding: var(--space-4) var(--space-5);
}


/* ── STEPPER ── */
.cva-stepper {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-5) 0;
    gap: 0;
}

.cva-step {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.cva-step__num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    border: 1.5px solid var(--color-border);
    color: var(--color-muted);
    background: transparent;
    transition: all 0.2s;
}

.cva-step__label {
    font-size: 11px;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

.cva-step__line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
    margin: 0 8px;
    flex-shrink: 0;
    min-width: 12px;
    transition: background 0.25s;
}

/* Estados del stepper */
.cva-step.is-done .cva-step__num {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.cva-step.is-active .cva-step__num {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: #fff;
}

.cva-step.is-active .cva-step__label {
    color: var(--color-text);
    font-weight: 600;
}

.cva-step.is-done .cva-step__label {
    color: var(--color-accent);
}

.cva-step__line.is-done {
    background: var(--color-accent);
}


/* ── SECCIONES DEL FORMULARIO ── */
.cva-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cva-tab-panel[hidden] { display: none; }


/* ── FILA DE DOS INPUTS ── */
.cva-row-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: var(--space-4);
}


/* ── SEPARADOR DE SECCIÓN ── */
.cva-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: var(--space-4) 0 var(--space-3);
}

.cva-divider__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-muted);
    white-space: nowrap;
}

.cva-divider__line {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}


/* ── CAMPO RANGE ── */
.cva-field-range {
    margin-bottom: var(--space-3);
}

.cva-field-range__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.cva-field-range__label {
    font-size: var(--text-sm);
    color: var(--color-text);
    font-weight: 400;
    line-height: 1.3;
}

.cva-field-range__label small {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-muted);
    margin-top: 2px;
    font-weight: 400;
}

.cva-field-range__badge {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-accent-dim, #00A878);
    background: rgba(0, 168, 120, 0.10);
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}

.cva-field-range__badge--gold {
    color: var(--color-gold-dim, #B57C0A);
    background: rgba(232, 168, 56, 0.13);
}

/* Hint text bajo un campo */
.cva-hint-text {
    font-size: var(--text-xs);
    color: var(--color-muted);
    line-height: 1.4;
    margin-top: var(--space-1);
}

/* Presets de escenario */
.cva-presets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.cva-preset {
    appearance: none;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: transparent;
    padding: var(--space-2) var(--space-1);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-muted);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    line-height: 1.3;
}

.cva-preset small {
    display: block;
    font-weight: 400;
    font-size: 0.68rem;
    margin-top: 2px;
    color: inherit;
    opacity: 0.75;
}

.cva-preset:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.cva-preset.is-active {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #fff;
}

/* Navegación entre paneles */
.cva-tab-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-2);
}

.cva-tab-next,
.cva-tab-prev {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: 600;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--space-2) 0;
    transition: opacity 0.15s;
}

.cva-tab-next { color: var(--color-accent-dim, #00A878); }
.cva-tab-prev { color: var(--color-muted); }

.cva-tab-next:hover,
.cva-tab-prev:hover { opacity: 0.65; }

/* Botón submit */
.cva-tab-nav .sim-submit {
    width: auto;
    padding: var(--space-2) var(--space-5);
    margin: 0;
    font-size: var(--text-sm);
}

/* Range dorado para inversión */
.cva-range--invest {
    background: linear-gradient(
        to right,
        var(--color-gold, #E8A838) 0%,
        var(--color-gold, #E8A838) var(--range-pct, 58%),
        var(--color-border) var(--range-pct, 58%),
        var(--color-border) 100%
    ) !important;
}

.cva-range--invest::-webkit-slider-thumb {
    border-color: var(--color-gold, #E8A838) !important;
}

.cva-range--invest::-moz-range-thumb {
    border-color: var(--color-gold, #E8A838) !important;
}


/* ─────────────────────────────────────────────
   SECCIÓN DE RESULTADOS
───────────────────────────────────────────── */
.cva-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: resultsIn 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

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

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

/* Veredicto */
.cva-veredicto {
    display: flex;
    align-items: center;
    margin-top: -1em;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    border: 1.5px solid transparent;
    transition: background 0.3s, border-color 0.3s;
}

.cva-veredicto--buy {
    background: rgba(0, 200, 150, 0.07);
    border-color: rgba(0, 200, 150, 0.35);
}

.cva-veredicto--rent {
    background: rgba(232, 168, 56, 0.07);
    border-color: rgba(232, 168, 56, 0.35);
}

.cva-veredicto__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

.cva-veredicto__titulo {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    margin-bottom: 3px;
}

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

/* Break-even banner */
.cva-breakeven {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
    font-size: var(--text-sm);
    font-weight: 500;
    color: #3B82F6;
}

.cva-breakeven svg { flex-shrink: 0; color: #3B82F6; }


/* ─────────────────────────────────────────────
   GRID DE RESULTADOS — dos columnas
───────────────────────────────────────────── */
.cva-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
    align-items: start;
}

.cva-res-col {
    background: var(--color-navy);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

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

.cva-res-col--buy .cva-res-col__head svg  { color: var(--color-accent); }
.cva-res-col--rent .cva-res-col__head svg { color: var(--color-gold, #E8A838); }

.cva-kpi--hero {
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-3);
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.cva-kpi--buy {
    background: rgba(0, 200, 150, 0.1);
    border: 1px solid rgba(0, 200, 150, 0.2);
}

.cva-kpi--rent {
    background: rgba(232, 168, 56, 0.1);
    border: 1px solid rgba(232, 168, 56, 0.2);
}

.cva-kpi--buy  .cva-kpi__value { color: var(--color-accent); font-size: clamp(1.4rem, 2.5vw, 1.9rem); }
.cva-kpi--rent .cva-kpi__value { color: var(--color-gold, #E8A838); font-size: clamp(1.4rem, 2.5vw, 1.9rem); }

.cva-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.cva-kpi-grid .cva-kpi {
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cva-kpi-grid .cva-kpi:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,.08);
    padding-right: var(--space-3);
}

.cva-kpi-grid .cva-kpi:nth-child(even) {
    padding-left: var(--space-3);
}

.cva-kpi-grid .cva-kpi:nth-last-child(-n+2) {
    border-bottom: none;
}

.cva-kpi__label {
    font-size: var(--text-xs);
    color: rgba(255,255,255,.55);
    line-height: 1.3;
}

.cva-kpi__value {
    font-family: var(--font-head);
    font-size: var(--text-base);
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}


/* ─────────────────────────────────────────────
   GRÁFICO
───────────────────────────────────────────── */
.cva-chart-wrap canvas { max-height: 320px; }


/* ─────────────────────────────────────────────
   HIPÓTESIS
───────────────────────────────────────────── */
.cva-assumptions {
    margin-top: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.cva-assumptions__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.cva-assumptions__title svg { color: var(--color-muted); }

.cva-assumptions__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-3);
}

.cva-assumption-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cva-assumption-item__label {
    font-size: var(--text-xs);
    color: var(--color-muted);
}

.cva-assumption-item__value {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}


/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 900px) {
    .cva-hero .sim-hero { padding: var(--space-8) 0 var(--space-10); }
    .cva-step__label { display: none; }
    .cva-step.is-active .cva-step__label { display: block; }
}

@media (max-width: 768px) {
    .cva-results-section { padding: var(--space-8) 0; }

    .cva-results-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .cva-veredicto {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .cva-row-inputs {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .cva-panel .sim-panel__body { padding: var(--space-3) var(--space-4); }

    .cva-stepper { padding: var(--space-3) var(--space-4) 0; }

    .cva-presets { gap: var(--space-1); }
    .cva-preset  { padding: var(--space-1); font-size: 0.65rem; }

    .cva-kpi__value { font-size: var(--text-sm); }
    .cva-kpi--buy  .cva-kpi__value,
    .cva-kpi--rent .cva-kpi__value { font-size: 1.3rem; }

    .cva-assumptions__grid { grid-template-columns: 1fr 1fr; }

    .cva-versus { gap: var(--space-2); }
    .cva-versus__item { padding: 4px 10px; font-size: var(--text-xs); }
}

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

/* ── Costes de comprar (split 2 columnas) ── */
.cva-costs-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 600px) {
    .cva-costs-split { grid-template-columns: 1fr; }
}
.cva-costs-col {
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}
.cva-costs-col__title {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-navy);
    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);
}
.cva-cost-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);
}
.cva-cost-row:last-child { border-bottom: none; }
.cva-cost-row strong {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--color-navy);
    white-space: nowrap;
}
.cva-cost-row--total {
    margin-top: var(--space-1);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(0,0,0,.08);
    border-bottom: none;
    color: var(--color-navy);
    font-weight: 600;
}
.cva-cost-row--total strong {
    color: var(--color-accent-dim);
}

/* ── PER por ciudades — agrupado en 3 bloques ── */
.cva-per-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: var(--space-3) 0 var(--space-2);
}
.cva-per-group__title {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-navy);
    margin-bottom: var(--space-2);
}
.cva-per-group__note {
    font-weight: 500;
    color: var(--color-muted);
}
.cva-per-group__cities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: var(--space-2);
}
.cva-per-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    text-align: center;
    background: rgba(13,31,60,.06);
}
.cva-per-cell__per {
    font-family: var(--font-head);
    font-size: var(--text-xl);
    font-weight: 800;
    line-height: 1;
    color: var(--color-navy);
}
.cva-per-cell__city {
    font-size: 11px;
    color: var(--color-muted);
    font-weight: 500;
}

/* ── Señales comprar vs alquilar ── */
.cva-signals-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 600px) {
    .cva-signals-split { grid-template-columns: 1fr; }
}
.cva-signals-col {
    background: #fff;
    border: 1px solid rgba(0,0,0,.05);
    border-radius: var(--radius-md);
    padding: var(--space-4);
}
.cva-signals-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);
}
.cva-signals-col--buy  .cva-signals-col__title { color: var(--color-accent-dim); }
.cva-signals-col--rent .cva-signals-col__title { color: #3B82F6; }
.cva-signals-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.cva-signals-list li {
    font-size: var(--text-sm);
    color: var(--color-muted);
    line-height: 1.4;
    padding-left: var(--space-4);
    position: relative;
    max-width: 100%;
}
.cva-signals-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    font-weight: 700;
    font-size: 12px;
}
.cva-signals-col--buy  .cva-signals-list li::before { color: var(--color-accent-dim); }
.cva-signals-col--rent .cva-signals-list li::before { color: #3B82F6; }

/* 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;
}