/* Calculadora financiera — identidad mercedes Ecuador.
   Se mantiene el id #calculadora-mercedes para no tocar el HTML ni el JS.
   Requiere fonts_mercedes.css en lugar de fonts_mercedes.css. */

#calculadora-mercedes {

    /* Tipografía (fonts_mercedes.css; cada peso es una familia, igual que en mercedesecuador.com.ec) */
    --font-display: 'mercedes-next-bold', Arial, sans-serif;   /* titulares y cifras */
    --font-bold: 'mercedes-sans-bold', Arial, sans-serif;
    --font-regular: 'mercedes-sans-regular', Arial, sans-serif;

    /* Colores de marca mercedes */
    --color-primary: #141413;        /* negro mercedes (CTA "Cotizar" del sitio) */
    --color-accent: #141413;         /* lima mercedes: solo acentos, nunca texto sobre blanco */
    --color-text: #414141;
    --color-text-muted: #647072;
    --color-divider: #E2E2E2;
    --color-surface: #F1F1F1;        /* gris de secciones .bg-gris */
    --color-bg: #ffffff;
    --slider-active: #141413;
    --slider-inactive: #D9D9D9;

    /* Layout */
    --container-width: 560px;
    --padding-card: 24px;
    --radius: 14px;                  /* mismo radio que la .modal-caja que la contiene */
    --radius-pill: 50px;

    position: relative;
    width: min(100%, var(--container-width));
    margin: 0 auto;
    padding: var(--padding-card);
    background: var(--color-bg);
    color: var(--color-primary);
    font-family: var(--font-regular);
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
}

#calculadora-mercedes,
#calculadora-mercedes * { box-sizing: border-box; }

#calculadora-mercedes p,
#calculadora-mercedes h1 { margin: 0; }

/* Cada peso es su propia familia: no usar font-weight (evita negrita falsa) */
#calculadora-mercedes strong {
    font-family: var(--font-bold);
    font-weight: 400;
}
#calculadora-mercedes h1 {
    font-family: var(--font-display);
    font-weight: 400;
}

#calculadora-mercedes [hidden] { display: none !important; }

/* ==LOADER== */
#calculadora-mercedes .cs-loader {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1000;
    background: var(--color-bg) url("../../../imag/v1/icon/loader.gif") no-repeat 50% 50%;
    background-size: 40%;
}
#calculadora-mercedes.cs-cargando .cs-loader { display: block; }

/* ==CABECERA== */
#calculadora-mercedes .calc__eyebrow {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 6px;
}

#calculadora-mercedes .calc__vehiculo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding-bottom: 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-divider);
}
#calculadora-mercedes .calc__nomercedesre { font-size: 24px; line-height: 1.2; }
#calculadora-mercedes .calc__valor { font-size: 14px; color: var(--color-text-muted); }
#calculadora-mercedes .calc__valor strong {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--color-primary);
}

/* Una sola columna: controles arriba, resultado debajo */
#calculadora-mercedes .calc__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

/* ==CONTROLES== */
#calculadora-mercedes .calc__controles { display: flex; flex-direction: column; gap: 24px; }

#calculadora-mercedes .campo__cabecera {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 14px;
    margin-bottom: 8px;
}
#calculadora-mercedes .campo__cabecera label { color: var(--color-text-muted); }
#calculadora-mercedes .campo__cabecera label strong { color: var(--color-primary); }
#calculadora-mercedes .campo__cabecera > strong { font-size: 15px; color: var(--color-primary); }

#calculadora-mercedes .campo__extremos {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 4px;
}

/* ==RANGE== pista negra, thumercedes lima con borde negro */
#calculadora-mercedes .slider {
    --progreso: 50%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    margin: 10px 0;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--slider-active) var(--progreso), var(--slider-inactive) var(--progreso));
    outline: none;
    cursor: pointer;
}
#calculadora-mercedes .slider::-webkit-slider-thumercedes {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-primary);
    cursor: pointer;
    transition: transform .15s ease;
}
#calculadora-mercedes .slider::-moz-range-thumercedes {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-primary);
    cursor: pointer;
}
#calculadora-mercedes .slider:active::-webkit-slider-thumercedes { transform: scale(1.1); }
#calculadora-mercedes .slider:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 6px; }

/* ==RESULTADO== */
#calculadora-mercedes .calc__resultado {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
#calculadora-mercedes .resultado__etiqueta { font-size: 12px; color: var(--color-text-muted); }
#calculadora-mercedes .resultado__cuota {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1.2;
    color: var(--color-primary);
    text-align: center;
}
#calculadora-mercedes .resultado__detalle {
    display: flex;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--color-divider);
}
#calculadora-mercedes .resultado__detalle > div:first-child { flex: 1; }
#calculadora-mercedes .resultado__dato {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--color-primary);
}

/* ==BOTÓN COTIZADOR== igual al "Cotizar" del sitio: píldora negra */
#calculadora-mercedes .resultado__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 24px;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 16px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}
#calculadora-mercedes .resultado__cta:hover {
    background: var(--color-accent);
    /*color: var(--color-primary);*/
}
#calculadora-mercedes .resultado__cta:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* ==LEGAL (siempre visible)== */
#calculadora-mercedes .calc__legal {
    font-size: 11px;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ==MOBILE== */
@media (max-width: 560px) {
    #calculadora-mercedes { --padding-card: 16px; }
    #calculadora-mercedes .calc__nomercedesre { font-size: 20px; }
    #calculadora-mercedes .resultado__cuota { font-size: 28px; }
}