/* ================= Inmigrapp Calculator – SaaS Clean (sin acordeones y sin tipo de producto) ================= */
:root{
  --brand:#3B82F6; --brand-600:#2563EB;
  --ink:#0B1220; --text:#1F2937; --muted:#6B7280;
  --bg:#F7F9FC; --panel:#FFFFFF; --line:#E6EAF0;
  --ok:#10B981; --warn:#F59E0B; --danger:#EF4444;
  --r-lg:16px; --shadow-1:0 8px 24px rgba(15,23,42,.08); --shadow-2:0 4px 14px rgba(15,23,42,.06);
  --focus:0 0 0 4px rgba(59,130,246,.18);
  --fs-h1: clamp(22px, 1.8vw, 28px); --fs-h2: 16px; --fs-body: 15px; --fs-help: 12px;
}

#inmigrapp-calculator-v2.ux{
  background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:24px;
  box-shadow:var(--shadow-2); font-family:Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Arial, sans-serif; color:var(--text);
}

/* Header */
.ux-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.ux-title h1{ margin:0; font:800 var(--fs-h1)/1.15 Inter, ui-sans-serif; color:var(--ink); }
.ux-title p{ margin:6px 0 0; color:var(--muted) }
.ux-head-kpis{ display:flex; gap:8px; flex-wrap:wrap }
.ux-chip{ background:#EEF6FF; border:1px solid #DBEAFE; color:#1E3A8A; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:700; }
.help{ font-size:var(--fs-help); color:var(--muted); display:block; margin-top:6px }

/* Candados contra temas constructores */
.ux-grid{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 380px !important;
  gap: 18px !important;
}
#calc-summary-col{ /* el aside de la derecha */
  position: sticky;
  top: 14px;
  height: fit-content;
}
#inmigrapp-calculator-v2.ux{ overflow: visible; } /* evita que 'sticky' falle por overflow */


/* Cards */
.ux-card, .card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow-1); }
.ux-card h2{ margin:0 0 10px; font:800 var(--fs-h2)/1.2 Inter; color:var(--ink); }

/* Campos */
.field{ margin-bottom:14px }
label{ display:block; font-weight:700; color:var(--ink); font-size:14px; margin-bottom:6px }
input, select{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:#fff;
  color:var(--ink); font:500 var(--fs-body)/1 Inter; outline:0; transition:border .2s, box-shadow .2s, transform .02s;
}
input:hover, select:hover{ border-color:#D7DDE6 }
input:focus, select:focus{ border-color:var(--brand); box-shadow:var(--focus) }
input.invalid, select.invalid{ border-color:var(--danger); box-shadow:0 0 0 4px rgba(239,68,68,.12); background:#FFF7F7 }

/* Botones */
.btn{ padding:12px 16px; border-radius:12px; border:1px solid transparent; cursor:pointer; font:800 14px/1 Inter; transition:transform .04s, box-shadow .18s, background .18s }
.btn:active{ transform:translateY(1px) }
.btn.primary{ background:var(--brand); color:#fff; box-shadow:0 10px 20px rgba(59,130,246,.20) }
.btn.primary:hover{ background:var(--brand-600) }
.btn.ghost{ background:#fff; color:#0F172A; border-color:#E5EAF1 }
.btn:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none }
.ux-actions{ display:flex; gap:10px; margin:18px 0; flex-wrap:wrap }

/* Rejillas */
.grid-2{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px }
.grid-3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px }
@media (max-width:980px){ .grid-2, .grid-3{ grid-template-columns:1fr } }

/* ===== Sin acordeones: siempre visibles ===== */
.acc{ border:1px solid var(--line); border-radius:14px; background:#fff; margin-bottom:16px; padding:18px; box-shadow:var(--shadow-1); }
.acc-h{ cursor:default; background:transparent; border-bottom:0; padding:0 0 10px 0; }
.acc-h .chev{ display:none !important; }
.acc-b{ display:block !important; padding:0; }
.acc-h h2{ margin:0 0 12px; font:800 18px/1.2 Inter, ui-sans-serif; color:var(--ink); }
.acc + .acc{ margin-top:18px; }

/* ===== Ocultar campo Tasa EA (backend usa 10.5% fijo) ===== */
#tasa_ea, label[for="tasa_ea"], #tasa_ea_error { display: none !important; }

/* Resultados (right) */
.ux-col.summary{ position:sticky; top:14px; height:fit-content }
.hero{ display:flex; flex-direction:column; gap:10px; margin-bottom:8px }
.hero-num{ font:900 26px/1 Inter; color:var(--ink) }
.hero-badges{ display:flex; flex-wrap:wrap; gap:6px }
.pill{ display:inline-block; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:12px; color:#0F172A; font-weight:700; }
.badge{ display:inline-block; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900; border:1px solid var(--line); }
#evaluacion[data-evaluacion="COMODO"]{ background:#ECFDF5; color:var(--ok); border-color:#D1FAE5 }
#evaluacion[data-evaluacion="AJUSTADO"]{ background:#FFFBEB; color:var(--warn); border-color:#FEF3C7 }
#evaluacion[data-evaluacion="RIESGO_ALTO"]{ background:#FEF2F2; color:var(--danger); border-color:#FEE2E2 }

/* Bento KPIs */
.bento{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:8px }
.tile{ border:1px solid var(--line); border-radius:14px; padding:14px; background:#fff; box-shadow:0 1px 0 rgba(15,23,42,.02); }
.tile label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; letter-spacing:.2px }
.tile strong{ font:800 16px/1.1 Inter; color:var(--ink) }

/* Barras de esfuerzo */
.bar{ margin-top:8px; background:#E9EEF6; border-radius:999px; height:10px; overflow:hidden }
.bar>i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--ok),var(--brand)); border-radius:999px; transition:width .45s ease }

/* Disclaimer */
.disclaimer{ font-size:12px; color:var(--muted); background:#FBFCFF; border:1px dashed #E6ECF5; border-radius:12px; padding:12px; margin-top:10px }


/* === Inmigrapp Calculator – Integrated visibility & layout safeguards === */
#acc-contacto{ display:none !important; }
#contact-section{ display:none !important; }
#results{ display:none !important; }
body.hipo-calculated #acc-contacto{ display:block !important; }
body.hipo-calculated #contact-section{ display:block !important; }
body.hipo-calculated #results{ display:block !important; }
/* Prevent duplicate 'Calcular' inside contact block */
#contact-section #calculate-btn{ display:none !important; }

/* ===== Mobile fix: 1 columna + aside no-sticky ===== */
@media (max-width: 980px) {
  /* Rompe el candado de 2 columnas */
  #calc-grid,
  .ux-grid {
    grid-template-columns: 1fr !important;
  }

  /* El aside deja de ser sticky en móvil */
  #calc-summary-col,
  .ux-col.summary {
    position: static !important;
    top: auto !important;
    height: auto !important;
  }

  /* KPIs en 1 columna si quieres más aire en pantallas pequeñas */
  .bento { grid-template-columns: 1fr !important; }
}

/* (opcional) tablets pequeñas en 2 cols si lo prefieres */
@media (min-width: 641px) and (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* === Spacing / padding entre bloques principales === */
#inmigrapp-calculator-v2 .ux-card,
#inmigrapp-calculator-v2 .card,
#inmigrapp-calculator-v2 .acc{
  margin-bottom: 18px;     /* separa “Simulación”, “Resultados” y “Lead” */
}

#inmigrapp-calculator-v2 .ux-card,
#inmigrapp-calculator-v2 .card{
  padding: 18px;           /* un poco más de aire dentro de cada tarjeta */
}

/* Evita espacio extra en el último bloque */
#inmigrapp-calculator-v2 .ux-card:last-child,
#inmigrapp-calculator-v2 .card:last-child,
#inmigrapp-calculator-v2 .acc:last-child{
  margin-bottom: 0;
}

/* Ajuste fino a la fila de checkboxes para que no “peguen” a los campos */
#inmigrapp-calculator-v2 .row-checks{
  margin-top: 4px;
  margin-bottom: 8px;
}

/* (Opcional) Mayor aire entre rejillas en formularios largos */
#inmigrapp-calculator-v2 .grid-2,
#inmigrapp-calculator-v2 .grid-3{
  gap: 14px;
}

/* ============ FIX #1: Alineación de checkboxes (Simulación + Lead) ============ */
#inmigrapp-calculator-v2 .ux-actions label,
#inmigrapp-calculator-v2 #acc-contacto .field label{
  display: flex;
  align-items: center;
  gap: 8px;
}
#inmigrapp-calculator-v2 .ux-actions label input[type="checkbox"],
#inmigrapp-calculator-v2 #acc-contacto .field label input[type="checkbox"]{
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
}

/* ============ FIX #2: Lead form → privacidad a ancho completo SOLO en la fila residencia/privacidad ============ */
/* (usa :has, moderno; afecta únicamente la grid-2 que contiene #residencia) */
#inmigrapp-calculator-v2 #acc-contacto .grid-2:has(#residencia){ 
  row-gap: 10px; 
}
#inmigrapp-calculator-v2 #acc-contacto .grid-2:has(#residencia) .field:last-child{
  grid-column: 1 / -1; /* hace que “Acepto la privacidad” ocupe toda la fila */
}

/* Proyecto → oculto por defecto hasta que marquen “Ya tengo propiedad” */
#proyecto-fields { display: none; }
#results .hero-eur{
  margin-top: 6px;
  font: 700 13px/1.2 Inter, ui-sans-serif;
  color: #6B7280; /* muted */
}