/*
 * Perfilador Hipotecario
 * Mini-reset con alcance (#hp-perfilador): Tailwind se carga sin "preflight"
 * para no alterar el tema de WordPress, y esto evita que el tema altere el perfilador.
 */
#hp-perfilador,
#hp-perfilador *,
#hp-perfilador *::before,
#hp-perfilador *::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e2e8f0; }

#hp-perfilador { --hp-primario: #13243f; --hp-secundario: #029fdf; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; text-align: left; }
#hp-perfilador h1, #hp-perfilador h2, #hp-perfilador h3, #hp-perfilador p,
#hp-perfilador dl, #hp-perfilador dd, #hp-perfilador ul, #hp-perfilador figure { margin: 0; padding: 0; }
#hp-perfilador h1, #hp-perfilador h2, #hp-perfilador h3 { font-size: inherit; font-weight: inherit; font-family: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; }
#hp-perfilador ul { list-style: none; }
#hp-perfilador a { color: inherit; text-decoration: inherit; box-shadow: none; }
#hp-perfilador hr { height: 0; margin: 0; background: none; color: inherit; }
#hp-perfilador svg { display: block; vertical-align: middle; }
#hp-perfilador table { border-collapse: collapse; margin: 0; width: 100%; background: transparent; }
#hp-perfilador th, #hp-perfilador td { padding: 0; background: transparent; text-align: inherit; }
#hp-perfilador button, #hp-perfilador input, #hp-perfilador label {
  font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit;
  margin: 0; padding: 0; text-transform: none; letter-spacing: normal; box-shadow: none;
  min-height: 0; height: auto; max-width: none;
}
#hp-perfilador button { background-color: transparent; background-image: none; cursor: pointer; border-radius: 0; }
#hp-perfilador input::placeholder { color: #94a3b8; opacity: 1; }
#hp-perfilador section { scroll-margin-top: 80px; }
#hp-perfilador .tabular { font-variant-numeric: tabular-nums; }

/* ---------- Sliders ---------- */
#hp-perfilador .hp-range {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 8px; border-radius: 9999px; outline: none; cursor: pointer; padding: 0; border: 0;
  background: linear-gradient(to right, var(--hp-secundario) 0%, var(--hp-secundario) var(--fill, 50%), #e2e8f0 var(--fill, 50%), #e2e8f0 100%);
}
#hp-perfilador .hp-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 5px solid var(--hp-secundario);
  box-shadow: 0 2px 8px rgba(2, 159, 223, .35);
  transition: transform .15s ease;
}
#hp-perfilador .hp-range::-webkit-slider-thumb:hover,
#hp-perfilador .hp-range:active::-webkit-slider-thumb { transform: scale(1.15); }
#hp-perfilador .hp-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 5px solid var(--hp-secundario);
  box-shadow: 0 2px 8px rgba(2, 159, 223, .35);
}
#hp-perfilador .hp-range:focus-visible { box-shadow: 0 0 0 4px rgba(2, 159, 223, .2); }

/* ---------- Botones de plazo y selector de enganche ---------- */
#hp-perfilador .hp-seg { transition: all .15s ease; background: #fff; }
#hp-perfilador .hp-seg[aria-pressed="true"] { background: var(--hp-primario); color: #fff; border-color: var(--hp-primario); box-shadow: 0 4px 12px rgba(19, 36, 63, .3); }
#hp-perfilador .hp-seg[aria-pressed="false"]:hover { border-color: var(--hp-secundario); color: var(--hp-primario); }
#hp-perfilador .hp-toggle[aria-pressed="true"] { background: #fff; color: var(--hp-primario); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
#hp-perfilador .hp-toggle[aria-pressed="false"] { color: #64748b; }

/* ---------- Tabla comparativa ---------- */
#hp-perfilador .hp-row { cursor: pointer; transition: background .15s ease; }
#hp-perfilador .hp-row:hover { background: #f1f5f9; }
#hp-perfilador .hp-row.is-active { background: #effaff; }
#hp-perfilador .hp-row.is-active td:first-child { color: #036999; font-weight: 700; }

#hp-perfilador .hp-bar-fill { transition: width .4s cubic-bezier(.4, 0, .2, 1), background-color .3s ease; }

/* ---------- Formulario ---------- */
#hp-perfilador .hp-check { accent-color: var(--hp-secundario); cursor: pointer; }
#hp-perfilador input[aria-invalid="true"] { border-color: #f43f5e; box-shadow: 0 0 0 3px rgba(244, 63, 94, .15); }
/* ---------- Simulador bloqueado hasta el registro ---------- */
#hp-perfilador .hp-candado { display: none; }
#hp-perfilador .hp-bloqueado .hp-candado { display: block; position: absolute; left: 0; right: 0; top: 9rem; z-index: 20; padding: 0 1rem; }
#hp-perfilador .hp-bloqueado .hp-bloqueable { filter: blur(6px); opacity: .55; pointer-events: none; user-select: none; }
#hp-perfilador .hp-ancla { scroll-margin-top: 90px; }

#hp-perfilador .hp-falta { outline: 2px solid #f43f5e; outline-offset: 6px; border-radius: .75rem; }
#hp-perfilador .hp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Portal de inmobiliarias ---------- */
#hp-perfilador textarea, #hp-perfilador select {
  font-family: inherit; font-size: 100%; line-height: inherit; color: inherit; margin: 0; box-shadow: none; max-width: none; height: auto; min-height: 0;
}
#hp-perfilador .hp-input { padding: .55rem .85rem; border: 1px solid #cbd5e1; border-radius: .5rem; font-size: .875rem; outline: none; }
#hp-perfilador .hp-input:focus { border-color: var(--hp-secundario); box-shadow: 0 0 0 3px rgba(2, 159, 223, .15); }
#hp-perfilador details > summary { list-style: none; cursor: pointer; }
#hp-perfilador details > summary::-webkit-details-marker { display: none; }
#hp-perfilador details[open] .hp-chevron { transform: rotate(180deg); }
#hp-perfilador .hp-chevron { transition: transform .2s ease; }

#hp-perfilador .hp-login p { margin: 0 0 1rem; }
#hp-perfilador .hp-login label { display: block; font-size: .875rem; font-weight: 600; color: #334155; margin-bottom: .25rem; }
#hp-perfilador .hp-login input[type="text"],
#hp-perfilador .hp-login input[type="password"] {
  display: block; width: 100%; padding: .75rem 1rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; outline: none;
}
#hp-perfilador .hp-login input[type="text"]:focus,
#hp-perfilador .hp-login input[type="password"]:focus { border-color: var(--hp-secundario); box-shadow: 0 0 0 3px rgba(2, 159, 223, .15); }
#hp-perfilador .hp-login .login-remember label { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: #475569; }
#hp-perfilador .hp-login input[type="checkbox"] { accent-color: var(--hp-secundario); width: 1rem; height: 1rem; }
#hp-perfilador .hp-login input[type="submit"] {
  width: 100%; padding: .8rem; border: 0; border-radius: .75rem; background: var(--hp-primario); color: #fff; font-weight: 600; cursor: pointer;
}
#hp-perfilador .hp-login input[type="submit"]:hover { background: #1f2d48; }