/* Configurador de VPS (app/configurador-vps.php): lo cargan /precios/vps/ y
   «Contratar» del panel (panel/ampliar.php). Va en su propia hoja porque son dos pieles
   (v4-web.css y v4-app.css) con los mismos tokens; los que sólo tiene la web llevan
   valor de reserva para el panel. */
/* ── Configurador (#configurar): de aquí se sale al checkout con todo elegido ──
   Piel de v4-web.css: superficies redondeadas, azul sólo en lo marcado y en el botón. */
.cfg{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start}
.cfg-pasos{display:grid;gap:16px;min-width:0}
.cfg-paso{border:0;margin:0;padding:24px;background:var(--sup);border-radius:var(--r-tarjeta);min-width:0}
.cfg-paso legend{float:left;width:100%;display:flex;align-items:center;gap:12px;font:600 19px/1.3 var(--disp);margin-bottom:18px;padding:0}
.cfg-paso legend small{font:400 13px/1 var(--disp);color:var(--tinta-3);margin-left:auto}
.cfg-paso legend+*{clear:both}
.cfg-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--sup-3,#1f1f1f);font:600 13px/1 var(--disp);flex:none}
.cfg input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.cfg label{cursor:pointer}
.cfg-planes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.cfg-plan,.cfg-ubi,.cfg-fam,.cfg-app{position:relative;background:var(--sup-2);border:1px solid var(--linea-2);border-radius:var(--r-caja,14px);transition:border-color .2s,background .2s}
.cfg-plan{display:grid;gap:4px;padding:14px 16px}
.cfg-plan-nom{font:600 16px/1.3 var(--disp);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cfg-plan-nom em{font:500 11px/1 var(--disp);font-style:normal;background:var(--azul-f);color:var(--azul-tx,#b3c0ff);padding:4px 7px;border-radius:999px}
.cfg-plan-spec{font-size:13px;color:var(--tinta-3)}
.cfg-plan-precio{font:600 17px/1.3 var(--disp);margin-top:4px}
.cfg-plan-precio small{font-weight:400;font-size:12px;color:var(--tinta-3)}
.cfg :is(.cfg-plan,.cfg-ubi,.cfg-fam,.cfg-app):hover{border-color:#3a3a3a}
.cfg :is(.cfg-plan,.cfg-ubi,.cfg-fam,.cfg-app):has(input:checked){border-color:var(--azul);background:var(--azul-f)}
.cfg :is(.cfg-plan,.cfg-ubi,.cfg-fam,.cfg-app):has(input:focus-visible){outline:2px solid var(--azul-claro);outline-offset:2px}
.cfg-ubis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cfg-ubi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px}
.cfg-ubi-flag img{display:block;border-radius:4px}
.cfg-ubi-tx b{display:block;font-weight:600}
.cfg-ubi-tx small{color:var(--tinta-3);font-size:13px}
.cfg-ubi-ms b{font:500 14px/1 var(--disp);color:var(--tinta-2);font-variant-numeric:tabular-nums}
.cfg-fams{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-bottom:14px}
.cfg-fam{display:grid;justify-items:center;gap:8px;padding:14px 8px;font-size:14px;text-align:center}
.cfg-fam img{display:block}
.cfg-fam:has(input:disabled){opacity:.35;cursor:not-allowed}
.cfg-campo{display:grid;gap:6px;max-width:360px}
.cfg-campo span{font-size:13px;color:var(--tinta-3)}
.cfg-campo select{appearance:auto;background:var(--sup-3,#1f1f1f);color:var(--tinta);border:1px solid var(--linea-2);border-radius:var(--r-campo);padding:11px 12px;font:400 15px/1.3 var(--disp)}
.cfg-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.cfg-app{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;padding:12px 14px}
.cfg-app b{display:block;font-weight:500;font-size:14px}
.cfg-app small{display:block;font-size:12px;color:var(--tinta-3)}
.cfg-app-ic{width:36px;height:36px;border-radius:10px;background:#fff;display:grid;place-items:center}
.cfg-app-ic img{display:block;width:24px;height:24px;object-fit:contain}
.cfg-app-vacio{background:var(--sup-3,#1f1f1f);border:1px dashed var(--linea-2)}
.cfg-app:has(input:disabled){opacity:.35;cursor:not-allowed}
.cfg-ips{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cfg-ips input{width:64px;text-align:center;background:var(--sup-3,#1f1f1f);color:var(--tinta);border:1px solid var(--linea-2);border-radius:var(--r-campo);padding:10px 6px;font:600 16px/1 var(--disp);-moz-appearance:textfield}
.cfg-ips input::-webkit-inner-spin-button{appearance:none}
.cfg-ips-b{width:42px;height:42px;border-radius:50%;border:1px solid var(--linea-2);background:var(--sup-3,#1f1f1f);color:var(--tinta);font:500 20px/1 var(--disp);cursor:pointer}
.cfg-ips-b:hover{background:#2a2a2a}
.cfg-ips .cfg-ayuda{margin:0 0 0 6px;flex:1 1 220px}
.cfg-ayuda{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--tinta-3)}
.cfg-ayuda[hidden]{display:none}
.cfg-res{position:sticky;top:84px;padding:24px;background:var(--sup);border-radius:var(--r-tarjeta);display:grid;gap:14px}
.cfg-res-nom{font:600 30px/1.1 var(--disp)}
.cfg-res-l,.cfg-res-p{display:grid;gap:8px;margin:0}
.cfg-res-l div,.cfg-res-p div{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.cfg-res-l dt,.cfg-res-p dt{color:var(--tinta-3)}
.cfg-res-l dd,.cfg-res-p dd{margin:0;text-align:right;display:flex;align-items:center;gap:6px;justify-content:flex-end}
.cfg-res-l dd img{border-radius:3px}
.cfg-res-p{border-top:1px solid var(--linea-2);padding-top:14px}
.cfg-res-tot{font:600 18px/1.3 var(--disp)!important;padding-top:6px}
.cfg-res-tot dt{color:var(--tinta)!important}
.cfg-ir{width:100%;justify-content:center}
.cfg-letra{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:12.5px;color:var(--tinta-3)}
.cfg-letra li::before{content:"✓ ";color:var(--verde-tx,#4ade80)}
@media (max-width:980px){.cfg{grid-template-columns:1fr}.cfg-res{position:static}}
@media (max-width:560px){.cfg-paso{padding:18px}.cfg-ubis{grid-template-columns:1fr}.cfg-planes{grid-template-columns:1fr 1fr}.cfg-plan{padding:12px}.cfg-plan-spec{font-size:12px}}
.cfg-barra{display:none}
@media (max-width:980px){
  .cfg-barra{display:flex;position:sticky;bottom:12px;z-index:5;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;background:rgba(20,20,20,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--linea-2);border-radius:999px;grid-column:1/-1;order:-1}
  .cfg-barra small{display:block;font-size:11px;color:var(--tinta-3)}
  .cfg-barra b{font:600 17px/1.2 var(--disp)}
  .cfg-res{order:1}
}
@media (max-width:560px){.cfg-fams{grid-template-columns:repeat(3,minmax(0,1fr))}.cfg-fam{padding:12px 4px;font-size:13px}}