/* ============================================================
   Listo247 — Calculadora «¿Cuánto se te escapa?»  (tarea 11 → integrada en Home)
   Estilos extraídos del DEMO (calculadora.html) y acotados bajo
   #calculadora para no chocar con .btn/.chip/.hero del sistema de diseño.
   Tokens (colores, radius, shadow, fuentes) son los globales.
   ============================================================ */

#calculadora .calc-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(16px,2.5vw,28px);align-items:start;
}
@media(max-width:860px){#calculadora .calc-grid{grid-template-columns:1fr}}

#calculadora .panel{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
}
/* Panel de inputs: fondo en banda suave para que cada bloque blanco
   (presets + grupos) destaque y la lista deje de leerse apelmazada. */
#calculadora .inputs{padding:clamp(18px,2.5vw,26px);background:var(--bg-band)}

/* Presets (bloque blanco sobre la banda, igual que los grupos) */
#calculadora .presets{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:16px 16px;margin-bottom:14px;
}
#calculadora .presets-q{display:block;font-weight:700;font-size:.92rem;color:var(--ink);margin-bottom:12px}
#calculadora .chips{display:flex;flex-wrap:wrap;gap:8px}
#calculadora .calc-chip{
  font-family:var(--font-body);font-size:.9rem;font-weight:600;cursor:pointer;
  padding:8px 16px;border-radius:100px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink);transition:border-color .15s,background .15s,color .15s;
}
#calculadora .calc-chip:hover{border-color:var(--primary)}
#calculadora .calc-chip.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Groups: cada grupo es un bloque blanco bien delimitado dentro de la banda */
#calculadora .group{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:6px 18px 10px;margin-bottom:14px;
}
#calculadora .group:last-of-type{margin-bottom:0}
#calculadora .group + .group{border-top:0;margin-top:0}
#calculadora .group-head{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;
  margin:0 -18px 6px;padding:14px 18px;border-bottom:1px solid var(--line);
}
#calculadora .group-head h3{
  position:relative;font-family:var(--font-head);font-size:1.08rem;font-weight:800;
  margin:0;padding-left:14px;
}
#calculadora .group-head h3::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:18px;border-radius:4px;background:var(--primary);
}
#calculadora .group-head span{font-size:.82rem;color:var(--muted);font-weight:500}

/* Fields / sliders: más aire vertical y separadores más tenues */
#calculadora .field{padding:22px 0;border-bottom:1px solid var(--line)}
#calculadora .group .field:last-child{border-bottom:0;padding-bottom:8px}
#calculadora .field label{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-weight:600;font-size:.98rem;margin-bottom:14px;
}
#calculadora .field output{
  font-family:var(--font-head);font-weight:800;font-size:1.05rem;
  color:var(--primary-deep);background:var(--primary-soft);
  padding:3px 12px;border-radius:100px;white-space:nowrap;
}
#calculadora .help{font-size:.84rem;color:var(--muted);margin-top:10px}

#calculadora input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:100px;
  background:var(--line);outline:none;cursor:pointer;
}
#calculadora input[type=range]:focus-visible{box-shadow:0 0 0 4px rgba(15,181,166,.25)}
#calculadora input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--primary);border:3px solid #fff;box-shadow:0 2px 8px rgba(11,124,115,.4);
  cursor:grab;transition:transform .15s;
}
#calculadora input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15);cursor:grabbing}
#calculadora input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;background:var(--primary);
  border:3px solid #fff;box-shadow:0 2px 8px rgba(11,124,115,.4);cursor:grab;
}

/* Bonus (bloque blanco plegable, en línea con presets y grupos) */
#calculadora details.bonus{
  margin-top:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;
}
#calculadora details.bonus summary{
  list-style:none;cursor:pointer;font-weight:700;color:var(--primary-deep);
  display:flex;align-items:center;gap:8px;font-size:.95rem;
}
#calculadora details.bonus summary::-webkit-details-marker{display:none}
#calculadora details.bonus summary::before{content:'+';font-size:1.2rem;line-height:1;width:14px}
#calculadora details.bonus[open] summary::before{content:'–'}
#calculadora details.bonus[open] summary{margin-bottom:4px}
#calculadora details.bonus .field{padding:18px 0;border-bottom:1px solid var(--line)}
#calculadora details.bonus .field:last-child{border-bottom:0;padding-bottom:4px}

/* Result */
#calculadora .result{padding:clamp(22px,3vw,34px);position:sticky;top:88px;background:linear-gradient(180deg,#fff,#fbfeff)}
@media(max-width:860px){#calculadora .result{position:static}}
#calculadora .result-label{color:var(--muted);font-size:.95rem;font-weight:500}
#calculadora .calc-hero{
  font-family:var(--font-head);font-weight:800;color:var(--primary-deep);
  font-size:clamp(2.1rem,6vw,3.2rem);line-height:1.05;letter-spacing:-.02em;margin:6px 0 4px;
}
#calculadora .calc-hero .cur{font-size:.45em;color:var(--muted);font-weight:700;margin-left:6px;letter-spacing:0}
#calculadora .result-year{color:var(--ink);font-weight:600;font-size:1.02rem}
#calculadora .result-year b{color:var(--primary-deep)}
#calculadora .tangible{
  margin-top:10px;font-size:.98rem;color:var(--ink);background:var(--primary-soft);
  padding:10px 14px;border-radius:12px;border-left:3px solid var(--primary);
}
#calculadora .tangible b{color:var(--primary-deep)}

#calculadora .breakdown{margin:22px 0;display:grid;gap:14px}
#calculadora .bd-row{display:grid;gap:6px}
#calculadora .bd-top{display:flex;justify-content:space-between;font-size:.9rem;align-items:center;gap:8px}
#calculadora .bd-top .lbl{color:var(--ink);font-weight:600}
#calculadora .bd-top .val{color:var(--muted);font-weight:600;white-space:nowrap}
#calculadora .tag{
  display:none;font-size:.7rem;font-weight:700;color:var(--primary-deep);
  background:var(--primary-soft);padding:2px 8px;border-radius:100px;margin-left:6px;vertical-align:middle;
}
#calculadora .bd-bar{height:9px;border-radius:100px;background:var(--primary-soft);overflow:hidden}
#calculadora .bd-fill{height:100%;border-radius:100px;background:var(--primary);width:0;transition:width .3s ease}

#calculadora .bonus-result{
  margin:4px 0 20px;padding:16px;border-radius:14px;
  background:var(--primary-soft);border:1px dashed rgba(15,181,166,.4);
}
#calculadora .bonus-result p{font-size:.9rem;color:var(--primary-deep)}
#calculadora .bonus-num{font-family:var(--font-head);font-weight:800;font-size:1.5rem;color:var(--primary-deep);margin:2px 0}
#calculadora .bonus-num small{font-size:.55em;font-weight:600;color:var(--muted)}
#calculadora .bonus-note{color:var(--muted)!important;font-size:.8rem!important;margin-top:4px}

#calculadora .recover-line{font-size:1.05rem;margin:4px 0 18px}
#calculadora .recover-line strong{color:var(--primary-deep)}

#calculadora .calc-cta{display:flex;gap:12px;flex-wrap:wrap}
#calculadora .calc-cta .btn{flex:1;min-width:150px}

#calculadora details.how{margin-top:20px;font-size:.88rem}
#calculadora details.how summary{cursor:pointer;color:var(--primary-deep);font-weight:600}
#calculadora details.how .how-body{margin-top:12px;padding:14px 16px;background:var(--bg-soft);border-radius:12px;color:var(--muted);line-height:1.7}
#calculadora details.how code{font-family:ui-monospace,Menlo,monospace;color:var(--ink);font-size:.85em}
#calculadora .disclaimer{margin-top:14px;font-size:.78rem;color:var(--muted)}

/* Comparativa sin / con Listo247 (neo-toggle reutilizado de Antes/Después) */
#calculadora .calc-compare{display:flex;justify-content:center;margin-bottom:20px}
#calculadora .calc-compare .neo-toggle{font-size:.9rem}
/* En modo "Con Listo247" el héroe pasa a verde "recuperado" para reforzar el mensaje */
#calculadora .result[data-mode="con"] .calc-hero{color:var(--ok)}
#calculadora .result[data-mode="con"] .calc-hero .cur{color:var(--muted)}
#calculadora .calc-antes{margin:-8px 0 16px}
#calculadora .calc-antes a{
  color:var(--primary-deep);font-weight:700;font-size:.95rem;text-decoration:none;
}
#calculadora .calc-antes a:hover{text-decoration:underline}

/* Lead-capture suave: el desglose por WhatsApp */
#calculadora .calc-share{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);text-align:center;
}
#calculadora .calc-share__q{font-weight:700;font-size:.98rem;margin-bottom:12px}
#calculadora .calc-share__btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-body);font-weight:700;font-size:.95rem;text-decoration:none;
  color:var(--primary-deep);background:#fff;border:1.5px solid var(--line);
  padding:11px 20px;border-radius:100px;transition:border-color .15s,transform .15s,box-shadow .2s;
}
#calculadora .calc-share__btn:hover{
  border-color:var(--primary);transform:translateY(-2px);box-shadow:0 8px 20px rgba(11,124,115,.18);
}
#calculadora .calc-share__btn svg{flex:none}
#calculadora .calc-share__note{margin-top:10px;font-size:.8rem;color:var(--muted)}

@media(prefers-reduced-motion:reduce){
  #calculadora .bd-fill{transition:none}
  #calculadora .calc-share__btn:hover{transform:none}
}