/*
 * Viviaza © 2026 — Todos los derechos reservados.
 *
 * Tipo de archivo:        CSS
 * Ruta del archivo:       css/hipoteca.css
 * Versión nueva:          1.1.0
 * Fecha de creación:      28/01/2026
 * Fecha de modificación:  05/06/2026
 *
 * Descripción:
 *   Estilos de la calculadora hipotecaria (simulador de mensualidad).
 *
 * Descripción del cambio:
 *   Adopta la paleta oficial mediante variables var(--c-*) de _tokens.css
 *   (texto, bordes, fondos y sombra), sustituyendo los colores fijos.
 *
 * Estado: listo para producción
 */

.hipoteca-wrapper {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

.hipoteca-subtitle {
    color: var(--c-text-dim);
    margin-bottom: 20px;
}

.hipoteca-card {
    background: var(--c-bg-alt);
    border-radius: 14px;
    padding: 25px;
    box-shadow: var(--shadow-md);
}

.hipoteca-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.field input,
.field select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--c-border-strong);
    font-size: 14px;
}

.hipoteca-info {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    gap: 15px;
    flex-wrap: wrap;
}

.hipoteca-result {
    margin-top: 25px;
    padding: 18px;
    background: var(--c-action-soft);
    border-radius: 12px;
    font-size: 22px;
    font-weight: bold;
}

.hipoteca-legal {
    margin-top: 15px;
    font-size: 13px;
    color: var(--c-text-dim);
    border-top: 1px dashed var(--c-border-strong);
    padding-top: 12px;
}

.enganche-info {
    font-size: 13px;
    color: var(--c-text-dim);
}