/**
 * style.css — Widget mdm_equity_1b731afd (Calculadora liberación de capital · Primeteka · D2).
 *
 * Slug: calc-equity-1b731afd | prefijo de clases: .mdm-eq-1b731afd-
 * Paleta y tipografía canónicas (design-system/MASTER.md): verde/marfil/oro,
 * Cormorant Garamond + DM Sans (D21), números tabulares, slider con relleno dorado.
 * Responsive: 1 columna → 2 columnas en ≥880px. NO se recolorea (herramienta en paleta de marca).
 */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
.mdm-eq-1b731afd-wrap {
    --green:        #1B4F43;
    --green-deep:   #16382F;
    --ivory:        #F3EEE7;
    --gold:         #C7A97B;
    --gold-deep:    #A98B5E;
    --text:         #16382F;
    --text-soft:    #4A5A52;
    --success:      #3E6B4E;
    --alert:        #B86A3F;
    --border-subtle: rgba(27, 79, 67, 0.10);
    --border-ondark: rgba(243, 238, 231, 0.16);
    --track-faint:   rgba(27, 79, 67, 0.14);
    --radius:       2px;
    --radius-pill:  999px;
    --font-display: "Cormorant Garamond", Georgia, serif;
    --font-body:    "DM Sans", system-ui, -apple-system, sans-serif;
    --ease:         cubic-bezier(0.16, 1, 0.3, 1);
    --dur:          240ms;

    box-sizing: border-box;
    font-family: var(--font-body);
    color: var(--text);
    background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
}

.mdm-eq-1b731afd-wrap *,
.mdm-eq-1b731afd-wrap *::before,
.mdm-eq-1b731afd-wrap *::after { box-sizing: inherit; }

/* Ancho constante (evita que el flex-item de Elementor se ajuste al contenido). */
.elementor-widget-mdm_equity_1b731afd { width: 100%; align-self: stretch; }

@media (min-width: 880px) {
    .mdm-eq-1b731afd-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ── Inputs (columna clara) ──────────────────────────────────────────────── */
.mdm-eq-1b731afd-inputs {
    padding: clamp(28px, 4vw, 56px);
    background: #FFFFFF;
}

.mdm-eq-1b731afd-field { margin-bottom: 28px; }
.mdm-eq-1b731afd-field:last-child { margin-bottom: 0; }

.mdm-eq-1b731afd-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    font-size: 11px;
    color: var(--text-soft);
}

.mdm-eq-1b731afd-val {
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--green);
    letter-spacing: 0;
    text-transform: none;
}

/* Range sliders — relleno dorado (var(--pct) lo pinta script.js). */
.mdm-eq-1b731afd-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    margin: 18px 0 0;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(to right,
        var(--gold) 0%, var(--gold) var(--pct, 50%),
        var(--track-faint) var(--pct, 50%), var(--track-faint) 100%);
}

.mdm-eq-1b731afd-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid var(--ivory);
    box-shadow: 0 1px 3px rgba(22, 56, 47, 0.30);
}
.mdm-eq-1b731afd-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid var(--ivory);
    box-shadow: 0 1px 3px rgba(22, 56, 47, 0.30);
    cursor: pointer;
}
.mdm-eq-1b731afd-slider:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 6px;
    border-radius: 6px;
}

/* ── Resultados (columna verde) ──────────────────────────────────────────── */
.mdm-eq-1b731afd-results {
    background: var(--green);
    color: var(--ivory);
    padding: clamp(28px, 4vw, 48px);
    display: flex;
    flex-direction: column;
}

.mdm-eq-1b731afd-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 600;
    font-size: 12px;
    color: var(--gold);
    margin-bottom: 16px;
}

/* Banner de viabilidad */
.mdm-eq-1b731afd-viab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border-ondark);
    background: rgba(243, 238, 231, 0.05);
}
.mdm-eq-1b731afd-viab-dot {
    flex: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--gold);
}
.mdm-eq-1b731afd-viab-text {
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--ivory);
}
.mdm-eq-1b731afd-viab[data-viab="ok"]    .mdm-eq-1b731afd-viab-dot { background: #7FD0A2; }
.mdm-eq-1b731afd-viab[data-viab="alert"] .mdm-eq-1b731afd-viab-dot { background: #E3A57E; }
.mdm-eq-1b731afd-viab[data-viab="ok"]    { border-color: rgba(127, 208, 162, 0.35); }
.mdm-eq-1b731afd-viab[data-viab="alert"] { border-color: rgba(227, 165, 126, 0.35); }

/* Indicadores LTV / DTI */
.mdm-eq-1b731afd-ind {
    margin: 22px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}
.mdm-eq-1b731afd-ind dt {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(243, 238, 231, 0.55);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.mdm-eq-1b731afd-ind dd {
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-size: 21px;
    font-weight: 600;
    color: var(--ivory);
    margin: 4px 0 0;
}

/* Badges (pill) */
.mdm-eq-1b731afd-badge {
    font-size: 9.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.mdm-eq-1b731afd-badge--ok {
    color: #A7D4BC;
    border-color: rgba(167, 212, 188, 0.40);
    background: rgba(62, 107, 78, 0.18);
}
.mdm-eq-1b731afd-badge--alert {
    color: #E3A57E;
    border-color: rgba(227, 165, 126, 0.40);
    background: rgba(184, 106, 63, 0.18);
}

/* Desglose de la oferta */
.mdm-eq-1b731afd-offer {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--border-ondark);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mdm-eq-1b731afd-offer .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-size: 13.5px;
    color: rgba(243, 238, 231, 0.78);
}
.mdm-eq-1b731afd-offer .row span:last-child {
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-weight: 600;
    color: var(--ivory);
    white-space: nowrap;
}
.mdm-eq-1b731afd-offer .total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--border-ondark);
    align-items: center;
}
.mdm-eq-1b731afd-offer .total span:first-child {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    font-weight: 600;
    color: rgba(243, 238, 231, 0.66);
}
.mdm-eq-1b731afd-offer .total span:last-child {
    font-size: 26px;
    font-weight: 700;
    color: var(--gold); /* editable vía control color_total_num */
}

/* Tabla de cuotas 10 / 15 / 20 — card con hairlines propios.
   OJO: el reset.css de Hello Elementor mete `table td, table th { border:1px solid
   rgba(128,128,128,.5); padding:15px; vertical-align:top }` en TODAS las tablas;
   aquí se neutraliza con border:0 / vertical-align explícitos en cada celda. */
.mdm-eq-1b731afd-cuotas {
    margin-top: 26px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-feature-settings: "tnum" 1, "lnum" 1;
    border: 1px solid var(--border-ondark);
    border-radius: var(--radius);
    background: rgba(243, 238, 231, 0.04);
    overflow: hidden;
}
.mdm-eq-1b731afd-cuotas caption {
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 10px;
    font-weight: 600;
    color: var(--gold);
    padding: 0 0 10px;
}
.mdm-eq-1b731afd-cuotas thead th {
    text-align: left;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(243, 238, 231, 0.55);
    padding: 12px 18px;
    border: 0;
    border-bottom: 1px solid var(--border-ondark);
    background: rgba(22, 56, 47, 0.45);
    vertical-align: middle;
    line-height: 1.4;
}
.mdm-eq-1b731afd-cuotas thead th:last-child { text-align: right; }
.mdm-eq-1b731afd-cuotas tbody th {
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    color: rgba(243, 238, 231, 0.85);
    padding: 13px 18px;
    border: 0;
    vertical-align: middle;
    line-height: 1.4;
}
.mdm-eq-1b731afd-cuotas tbody td {
    text-align: right;
    font-size: 16px;
    font-weight: 600;
    color: var(--ivory);
    padding: 13px 18px;
    border: 0;
    vertical-align: middle;
    line-height: 1.4;
}
.mdm-eq-1b731afd-cuotas tbody tr + tr th,
.mdm-eq-1b731afd-cuotas tbody tr + tr td {
    border-top: 1px solid rgba(243, 238, 231, 0.10);
}

/* CTA */
.mdm-eq-1b731afd-cta {
    margin-top: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: var(--ivory);
    color: var(--green-deep);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--radius);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mdm-eq-1b731afd-cta:hover { background: var(--gold); color: var(--green-deep); }
.mdm-eq-1b731afd-cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mdm-eq-1b731afd-cta svg { width: 14px; height: 14px; }

.mdm-eq-1b731afd-cta-note {
    margin: 12px 0 0;
    font-size: 11px;
    color: rgba(243, 238, 231, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .mdm-eq-1b731afd-slider::-webkit-slider-thumb,
    .mdm-eq-1b731afd-cta { transition: none; }
}