:root{
  --bg:#f5f6f8; --card:#fff; --tinta:#0f1720; --gris:#6b7280; --linea:#e3e6ea;
  --acento:#0b63ce; --ok:#0f7b46; --mal:#b42318; --warn:#9a5b00; --warnbg:#fff6e5;
  --radio:14px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tinta);
  font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;padding-bottom:150px}
header{position:sticky;top:0;z-index:5;background:var(--tinta);color:#fff;
  padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top))}
.marca-mes{display:flex;align-items:center;gap:8px}
.marca-mes strong{font-size:18px;letter-spacing:.2px}
.badge{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  background:rgba(255,255,255,.16);padding:3px 8px;border-radius:99px}
.badge.warn{background:#f5c451;color:#3a2a00}
main{padding:16px}
section{background:var(--card);border-radius:var(--radio);padding:14px;margin-bottom:12px;
  box-shadow:0 1px 2px rgba(16,24,40,.05)}
h2{margin:0 0 10px;font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.6px;color:var(--gris)}
h2 .sub{text-transform:none;letter-spacing:0;font-weight:500;color:#9aa2ad}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{appearance:none;border:1.5px solid var(--linea);background:#fbfcfd;color:var(--tinta);
  font:inherit;font-size:15px;padding:11px 15px;border-radius:99px;min-height:44px;
  cursor:pointer;transition:.12s}
.pill:active{transform:scale(.97)}
.pill[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff;font-weight:600}
.pill[disabled]{opacity:.38}
.pill .uds{display:block;font-size:11px;opacity:.65;font-weight:400}
.nota{margin:10px 0 0;font-size:13px;color:var(--warn);background:var(--warnbg);
  padding:9px 11px;border-radius:10px}
.fila-precio{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-top:1px solid var(--linea)}
.fila-precio:first-of-type{border-top:0;padding-top:0}
.fila-precio span,.fila-precio label{font-size:14px;color:var(--gris)}
.fila-precio b{font-size:17px;font-variant-numeric:tabular-nums}
.fila-precio.dcto input{max-width:52%}
.fila-precio.total{border-top:1.5px solid var(--tinta);padding-top:11px}
.fila-precio.total span{color:var(--tinta);font-weight:600}
.fila-precio.total b{font-size:21px}
input[type=text]{flex:1;min-width:0;font:inherit;font-size:19px;font-weight:600;
  text-align:right;padding:11px 13px;border:1.5px solid var(--linea);border-radius:12px;
  background:#fbfcfd;min-height:46px}
input:focus{outline:2px solid var(--acento);outline-offset:-1px}
.campos{display:grid;gap:10px}
.campo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.campo label{font-size:14px;flex:1}
.campo input{max-width:46%}
.item{border-top:1px solid var(--linea);padding:11px 0}
.item:first-child{border-top:0}
.item-fila{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.item-fila b{font-weight:600;font-size:15px}
.item-fila .monto{font-variant-numeric:tabular-nums;color:var(--gris);font-size:14px}
.seg{display:flex;gap:0;border:1.5px solid var(--linea);border-radius:11px;overflow:hidden}
.seg button{flex:1;appearance:none;border:0;border-left:1.5px solid var(--linea);
  background:#fbfcfd;font:inherit;font-size:13px;padding:10px 4px;min-height:42px;cursor:pointer;color:var(--gris)}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--tinta);color:#fff;font-weight:600}
.seg button.regalo[aria-pressed="true"]{background:var(--mal)}
.seg button.parcial[aria-pressed="true"]{background:var(--warn)}
.item .parcial-box{margin-top:8px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--gris)}
#avisos{display:grid;gap:8px}
.aviso{background:var(--warnbg);border-left:4px solid #f5c451;color:#5c3a00;
  padding:11px 13px;border-radius:10px;font-size:14px}
.aviso.duro{background:#fef1f0;border-color:var(--mal);color:#7a1c14}
.espacio{height:8px}
footer#resumen{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--tinta);
  color:#fff;padding:14px 16px;padding-bottom:max(14px,env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(16,24,40,.18)}
footer .linea{display:flex;justify-content:space-between;align-items:baseline}
footer .linea strong{font-size:30px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
footer .linea span{font-size:13px;text-transform:uppercase;letter-spacing:.6px;opacity:.75}
footer .sub2{margin-top:2px;font-size:13px}
footer .sub2 span{opacity:.7;text-transform:none;letter-spacing:0}
footer.mal strong{color:#ff9a8f}
footer.ok strong{color:#7ee2ab}
#btn-detalle{position:absolute;right:14px;top:-14px;width:34px;height:28px;border:0;
  border-radius:8px 8px 0 0;background:var(--tinta);color:#fff;font-size:11px;cursor:pointer}
#detalle{margin-top:10px;border-top:1px solid rgba(255,255,255,.18);padding-top:8px;
  font-size:13px;display:grid;gap:3px;max-height:40vh;overflow:auto}
#detalle div{display:flex;justify-content:space-between;opacity:.85}
#detalle div.fuerte{opacity:1;font-weight:600}
#detalle b{font-variant-numeric:tabular-nums}