/* ==========================================================
   Auto Loan Calculator (/simulador-credito-automotriz/) —
   page-specific styles only. Everything shared with the other
   calculator pages (container width, form/results card, buttons,
   donut chart, the amortization table + toggle/CSV controls, the
   early-payoff comparison block, the balance-over-time chart card,
   guide/formula blocks) lives in
   assets/css/components/finance-calculator.css and is NOT
   duplicated here.
   ========================================================== */

.compound-field__optional {
    font-weight: 400;
    color: var(--text-secondary);
}

/* Equal, predictable control height for inputs and selects on this
   page (small visual-only normalization, no markup/behavior change). */
.finance-auto-page .compound-field__input,
.finance-auto-page .compound-field__select {
    height: 44px;
    box-sizing: border-box;
}

/* ---------------------------------------------------------
   Term quick-picks (12/24/36/48/60/72 meses)
--------------------------------------------------------- */

.auto-term__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.auto-term__preset-btn {
    border: 1px solid var(--finance-border);
    background: var(--color-surface);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    min-height: 30px;
    padding: 0 10px;
    border-radius: var(--radius-badge);
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.auto-term__preset-btn:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.auto-term__preset-btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.auto-term__preset-btn.is-active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #ffffff;
}

/* ---------------------------------------------------------
   "No financing needed" state (enganche 100%): hide the
   credit-dependent sections instead of showing an empty/broken
   table or chart.
--------------------------------------------------------- */

#auto-credit-sections[hidden] {
    display: none;
}

/* This page's amortization table has 9 columns (vs. 8 on
   calculadora-de-prestamos, adding "Seguro"); a touch tighter
   than the shared default so it still fits 1024px+ without
   triggering horizontal scroll. */
.finance-auto-page .loan-amortization th,
.finance-auto-page .loan-amortization td {
    padding: 11px 8px;
    font-size: 13.5px;
}

/* ---------------------------------------------------------
   Comparación por plazo
--------------------------------------------------------- */

.auto-term-compare {
    background: var(--finance-surface);
    border: 1px solid var(--finance-border);
    border-radius: var(--finance-radius-lg);
    box-shadow: var(--finance-shadow-sm);
    padding: var(--space-6);
    margin-bottom: var(--space-9);
}

.auto-term-compare h2 {
    margin: 0 0 6px;
    font-size: 21px;
    font-weight: 800;
    color: var(--finance-text);
}

.auto-term-compare__note {
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    max-width: 640px;
}

.auto-term-compare__scroll {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.auto-term-compare__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}

.auto-term-compare__table th,
.auto-term-compare__table td {
    padding: 11px 12px;
    white-space: nowrap;
    text-align: right;
    border-bottom: 1px solid var(--table-divider);
}

.auto-term-compare__table th:first-child,
.auto-term-compare__table td:first-child {
    text-align: left;
}

.auto-term-compare__table thead th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: 700;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.auto-term-compare__table tbody tr:hover {
    background: var(--table-row-hover);
}

.auto-term-compare__table tbody tr.is-selected {
    background: var(--brand-glow-sm);
}

.auto-term-compare__table tbody tr.is-selected td:first-child {
    font-weight: 800;
    color: var(--brand-primary);
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */

@media (max-width: 480px) {
    .auto-term-compare {
        padding: var(--space-5);
    }
}