/*
 * 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);
}

/* ---- Captura de lead (asesor) ---- */
.hipoteca-lead {
    margin-top: 22px;
    background: var(--c-bg-alt);
    border-radius: 14px;
    padding: 22px 25px;
    box-shadow: var(--shadow-md);
}
.hipoteca-lead h3 { margin: 0 0 6px; font-size: 18px; }
.hipoteca-lead p  { margin: 0 0 14px; color: var(--c-text-dim); font-size: 14px; }

.hipoteca-lead-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: center;
}
.hipoteca-lead-fields input {
    width: 100%;
    padding: 11px 12px;
    border-radius: 8px;
    border: 1px solid var(--c-border-strong);
    font-size: 14px;
}
.hipoteca-lead-fields button {
    padding: 12px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--c-action, #E07856);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}
.hipoteca-lead-fields button:hover    { filter: brightness(0.95); }
.hipoteca-lead-fields button:disabled { opacity: .6; cursor: default; }

.hipoteca-lead-msg { margin-top: 12px; font-size: 14px; min-height: 1em; }
.hipoteca-lead-msg.ok  { color: var(--c-success, #0F6E56); font-weight: 700; }
.hipoteca-lead-msg.err { color: var(--c-danger, #A32D2D); }

/* ---- Tabla comparativa ordenable ---- */
.hipoteca-tabla-wrap  { margin-top: 22px; overflow-x: auto; }
.hipoteca-tabla-hint  { font-size: 13px; color: var(--c-text-dim); margin: 0 0 10px; }
.hipoteca-tabla       { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.hipoteca-tabla th,
.hipoteca-tabla td    { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--c-border-strong); }
.hipoteca-tabla th:first-child,
.hipoteca-tabla td:first-child { text-align: left; }
.hipoteca-tabla th    { cursor: pointer; user-select: none; font-weight: 700; white-space: nowrap; }
.hipoteca-tabla th:hover        { color: var(--c-action, #E07856); }
.hipoteca-tabla tbody tr:hover  { background: var(--c-action-soft); }