/*!
 * TuPrimeraHipoteca — Calculadora "¿Cuánto puedo pagar de hipoteca?"
 * Estilos aislados y con espacio de nombres (prefijo tph-) para no afectar
 * a ninguna otra pagina del sitio. Cargar SOLO en /cuanto-puedo-pagar-de-hipoteca/.
 * Mobile-first: base = movil, min-width 640px = escritorio.
 */

.tph-calc-root {
  --tph-verde: #1a7f37;
  --tph-verde-bg: #e6f4ea;
  --tph-ambar: #92600a;
  --tph-ambar-bg: #fff3d6;
  --tph-rojo: #b3261e;
  --tph-rojo-bg: #fdecea;
  --tph-azul: #0b4f8a;
  --tph-azul-bg: #eaf3fb;
  --tph-texto: #1f2937;
  --tph-texto-suave: #4b5563;
  --tph-borde: #d1d5db;
  --tph-fondo: #ffffff;
  --tph-fondo-alt: #f7f8fa;
  --tph-radio: 10px;
  --tph-foco: #1d4ed8;

  box-sizing: border-box;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--tph-texto);
  background: var(--tph-fondo);
}
.tph-calc-root *, .tph-calc-root *::before, .tph-calc-root *::after { box-sizing: border-box; }

.tph-calc-root .tph-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.tph-calc-root .tph-intro { margin: 0 0 20px; color: var(--tph-texto-suave); font-size: 0.98rem; line-height: 1.5; }

.tph-calc-root .tph-campo { margin-bottom: 18px; }
.tph-calc-root label.tph-label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.95rem; }
.tph-calc-root .tph-ayuda { display: block; font-size: 0.85rem; color: var(--tph-texto-suave); margin-bottom: 6px; line-height: 1.4; }

.tph-calc-root input[type="text"],
.tph-calc-root input[type="number"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid var(--tph-borde);
  border-radius: var(--tph-radio);
  background: var(--tph-fondo);
  color: var(--tph-texto);
}
.tph-calc-root input:focus,
.tph-calc-root input[type="range"]:focus {
  outline: 3px solid var(--tph-foco);
  outline-offset: 1px;
}

.tph-calc-root .tph-error {
  display: block;
  color: var(--tph-rojo);
  font-size: 0.85rem;
  min-height: 1.1em;
  margin-top: 4px;
}

.tph-calc-root .tph-slider-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.tph-calc-root .tph-slider-valor { font-weight: 700; font-variant-numeric: tabular-nums; }
.tph-calc-root input[type="range"] {
  width: 100%;
  height: 44px; /* area tactil >= 44px (WCAG 2.5.5 / Apple HIG) */
  cursor: pointer;
}

.tph-calc-root .tph-resultados {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 2px solid var(--tph-borde);
}

.tph-calc-root .tph-result-hero {
  background: var(--tph-azul-bg);
  border-radius: var(--tph-radio);
  padding: 18px;
  text-align: center;
  margin-bottom: 16px;
}
.tph-calc-root .tph-result-label { margin: 0; font-size: 0.9rem; color: var(--tph-texto-suave); }
.tph-calc-root .tph-result-value { margin: 4px 0; font-size: 2rem; font-weight: 800; color: var(--tph-azul); line-height: 1.1; }
.tph-calc-root .tph-result-sub { margin: 0; font-size: 0.88rem; color: var(--tph-texto-suave); }

.tph-calc-root .tph-semaforos { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tph-calc-root .tph-semaforo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--tph-radio);
  background: var(--tph-fondo-alt);
  font-size: 0.95rem;
}
.tph-calc-root .tph-semaforo-icon { font-size: 1.2rem; }

.tph-calc-root .tph-aviso {
  border-radius: var(--tph-radio);
  padding: 12px 14px;
  font-size: 0.9rem;
  margin-bottom: 12px;
  line-height: 1.45;
}
.tph-calc-root .tph-aviso-discrepancia { background: var(--tph-ambar-bg); color: var(--tph-ambar); border: 1px solid var(--tph-ambar); }
.tph-calc-root .tph-aviso-financiacion { background: var(--tph-fondo-alt); color: var(--tph-texto); border: 1px solid var(--tph-borde); }
.tph-calc-root .tph-aviso a { color: var(--tph-azul); }

.tph-calc-root .tph-detalle { margin: 0 0 12px; }
.tph-calc-root .tph-detalle-fila {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--tph-borde);
  font-size: 0.95rem;
}
.tph-calc-root .tph-detalle-fila dt { color: var(--tph-texto-suave); font-weight: 500; }
.tph-calc-root .tph-detalle-fila dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

.tph-calc-root .tph-ahorro-msg,
.tph-calc-root .tph-margen {
  font-size: 0.95rem;
  padding: 10px 12px;
  background: var(--tph-fondo-alt);
  border-radius: var(--tph-radio);
  margin-bottom: 10px;
}
.tph-calc-root .tph-margen-negativo { background: var(--tph-rojo-bg); color: var(--tph-rojo); font-weight: 600; }

.tph-calc-root .tph-sin-escenario { color: var(--tph-texto-suave); font-size: 0.92rem; font-style: italic; }
.tph-calc-root .tph-enlace-contextual { font-size: 0.92rem; }
.tph-calc-root .tph-enlace-contextual a { color: var(--tph-azul); }

.tph-calc-root .tph-disclaimer {
  margin-top: 20px;
  padding: 14px;
  background: var(--tph-fondo-alt);
  border-radius: var(--tph-radio);
  font-size: 0.85rem;
  color: var(--tph-texto-suave);
  line-height: 1.5;
}
.tph-calc-root .tph-disclaimer p { margin: 0 0 8px; }
.tph-calc-root .tph-disclaimer p:last-child { margin-bottom: 0; }

/* Escritorio: algo más de aire, sin recolocar la jerarquia mobile-first */
@media (min-width: 640px) {
  .tph-calc-root { padding: 24px; }
  .tph-calc-root .tph-result-value { font-size: 2.4rem; }
  .tph-calc-root .tph-semaforos { flex-direction: row; }
  .tph-calc-root .tph-semaforo { flex: 1; }
}

/* Modo oscuro del sistema: mantener contraste AA */
@media (prefers-color-scheme: dark) {
  .tph-calc-root {
    --tph-texto: #f1f5f9;
    --tph-texto-suave: #cbd5e1;
    --tph-borde: #3f4757;
    --tph-fondo: #1a1f29;
    --tph-fondo-alt: #232936;
    --tph-verde-bg: #123a20;
    --tph-ambar-bg: #3a2c05;
    --tph-rojo-bg: #3a1210;
    --tph-azul-bg: #12283d;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tph-calc-root * { transition: none !important; animation: none !important; }
}