/* Todas las reglas van bajo #calculadora-subaru para no afectar otros elementos */

#calculadora-subaru {

    /* Tipografía (las fuentes vienen de fonts_subaru.css, cada peso es una familia) */
    --font-bold: 'AvenirNextLTPro-Bold', 'Avenir Next', Arial, sans-serif;
    --font-regular: 'AvenirNextLTPro-Regular', 'Avenir Next', Arial, sans-serif;

    /* Colores */
    --color-primary: #000000;
    --color-secondary: #00a0dc;
    --color-secondary-dark: #006c94;
    --color-secondary-bg: #e6f6fc;
    --color-text-muted: #666666;
    --color-border: #999999;
    --color-divider: #e2e2e2;
    --color-bg: #ffffff;
    --slider-active: #00a0dc;
    --slider-inactive: #999999;

    /* Layout */
    --container-width: 560px;
    --padding-card: 24px;
    --radius: 8px;

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

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

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

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

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

/* ==Loader== */
#calculadora-subaru .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-subaru.cs-cargando .cs-loader { display: block; }

/* ==Cabecera: nombre a la izquierda, valor a su lado== */
#calculadora-subaru .calc__eyebrow {
    font-size: 13px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}

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

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

/* ==Controles== */
#calculadora-subaru .calc__controles { display: flex; flex-direction: column; gap: 22px; }

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

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

/* ==Range== (Mismo lenguaje visual del original) */
#calculadora-subaru .slider {
    --progreso: 50%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    margin: 8px 0;
    border-radius: 999px;
    background: linear-gradient(to right,
        var(--slider-active) var(--progreso), var(--slider-inactive) var(--progreso));
    outline: none;
    cursor: pointer;
}
#calculadora-subaru .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--color-primary);
    cursor: pointer;
}
#calculadora-subaru .slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--color-primary);
    cursor: pointer;
}
#calculadora-subaru .slider:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 6px; }

/* ==Resultado== */
#calculadora-subaru .calc__resultado {
    background: var(--color-secondary-bg);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#calculadora-subaru .resultado__etiqueta { font-size: 12px; color: var(--color-secondary-dark); }
#calculadora-subaru .resultado__cuota {
    font-family: var(--font-bold);
    font-size: 30px;
    line-height: 1.2;
    color: var(--color-secondary);
    text-align: center;
}
#calculadora-subaru .resultado__detalle {
    display: flex;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 108, 148, .25);
}
#calculadora-subaru .resultado__detalle > div:first-child { flex: 1 1 50%; }
#calculadora-subaru .resultado__dato {
    font-family: var(--font-bold);
    font-size: 15px;
    color: var(--color-secondary-dark);
}

/* ==Botón cotizador== */
#calculadora-subaru .resultado__cta {
    display: block;
    text-align: center;
    padding: 12px 16px;
    border-radius: var(--radius);
    background: var(--color-secondary);
    color: #ffffff;
    font-family: var(--font-bold);
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
}
#calculadora-subaru .resultado__cta:hover { background: var(--color-secondary-dark); }

/* ==Legal (Siempre visible)== */
#calculadora-subaru .calc__legal {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-muted);
    text-align: justify;
}

/* ==Mobile== */
@media (max-width: 560px) {
    #calculadora-subaru { --padding-card: 16px; }
    #calculadora-subaru .calc__nombre { font-size: 19px; }
    #calculadora-subaru .resultado__cuota { font-size: 28px; }
    #calculadora-subaru .calc__resultado > div:nth-child(1) > p.resultado__etiqueta {
        text-align: center;
    }
    #calculadora-subaru .resultado__detalle {
        flex-direction: column;
    }
}