/* Magnvex — Calculadora de pacientes perdidos (se carga después de styles.css y diagnostico.css) */
.cl-hero{min-height:auto;padding:150px 0 70px}
.cl-hero h1{max-width:18ch}
.cl-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,60px);align-items:start}
.cl-form{display:grid;gap:36px;padding:clamp(26px,3.4vw,42px);border:1px solid var(--line);border-radius:26px;background:linear-gradient(170deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.cl-form-title{font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.15}
.cl-campo{display:grid;gap:14px}
.cl-lbl{display:flex;justify-content:space-between;align-items:flex-end;gap:18px}
.cl-lbl label{font-weight:600;font-size:1.02rem;line-height:1.4;color:var(--text)}
.cl-num{display:flex;align-items:baseline;gap:6px;flex:none}
.cl-num input{width:4.6em;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-family:var(--display);font-weight:700;font-size:1.15rem;text-align:right;-moz-appearance:textfield;appearance:textfield}
.cl-num input::-webkit-outer-spin-button,.cl-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cl-num input:focus{outline:none;border-color:var(--gold)}
.cl-num span{color:var(--text-muted);font-size:.85rem;white-space:nowrap}
.cl-campo input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:6px 0;border-radius:6px;cursor:pointer;background:linear-gradient(90deg,var(--gold) 0,var(--gold-hi) var(--p,20%),rgba(255,255,255,.12) var(--p,20%))}
.cl-campo input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:8px}
.cl-campo input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--gold-hi);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--gold),0 6px 18px rgba(200,168,75,.35)}
.cl-campo input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold-hi);border:4px solid var(--bg);box-shadow:0 0 0 1px var(--gold)}
.cl-ayuda{color:var(--text-muted);font-size:.88rem;line-height:1.6}

.cl-res{position:sticky;top:110px;display:grid;gap:16px;padding:clamp(26px,3.4vw,42px);border:1px solid rgba(200,168,75,.38);border-radius:26px;background:linear-gradient(170deg,var(--surface2),var(--surface) 60%);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.cl-res-k{color:var(--gold)}
.cl-res-euros{font-family:var(--display);font-weight:800;font-size:clamp(3rem,7vw,5.4rem);line-height:.95;letter-spacing:-.04em;background:linear-gradient(100deg,var(--gold) 0%,var(--gold-hi) 45%,var(--gold) 70%,#9c7f2c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.cl-res-euros small{font-size:.42em;letter-spacing:0}
.cl-res-pac{color:var(--text-dim);font-size:1.02rem;line-height:1.6}
.cl-res-pac b{color:var(--text)}
.cl-cuenta{font-family:var(--mono);font-size:.74rem;line-height:1.9;color:var(--text-muted);border-top:1px solid var(--line);padding-top:14px}
.cl-veredicto{padding:14px 16px;border-radius:14px;background:rgba(124,111,240,.1);border:1px solid rgba(124,111,240,.3);color:var(--text);font-size:.96rem;line-height:1.6}
.cl-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.cl-nota{color:var(--text-muted);font-size:.8rem;line-height:1.6}

.cl-pasos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cl-pasos li{display:grid;gap:12px;align-content:start;padding:30px 26px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(170deg,var(--surface2),var(--surface) 55%)}
.cl-pasos .mono{color:var(--gold)}
.cl-pasos h3{font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.15}
.cl-pasos p{color:var(--text-dim);font-size:.96rem;line-height:1.65}
.cl-fuente{margin-top:40px;max-width:720px;color:var(--text-dim);line-height:1.7}
.cl-fuente a{color:var(--gold-hi)}

@media (max-width:900px){
  .cl-hero{padding:130px 0 50px}
  .cl-grid{grid-template-columns:1fr}
  .cl-res{position:static}
  .cl-pasos{grid-template-columns:1fr}
}
@media (max-width:480px){
  .cl-lbl{flex-direction:column;align-items:flex-start;gap:10px}
  .cl-acciones .btn{width:100%;justify-content:center}
}