*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;margin:0;color:#111;background:#fafafa}
.container{max-width:960px;margin:0 auto;padding:12px 16px}
.header{padding:10px 0}
.titlebar{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px}
.titlebar h1{margin:0}
.titlebar .updated{font-size:.9rem;color:#666}
.toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0}
.toolbar .badges{flex:1;display:flex;gap:8px;flex-wrap:wrap}
.badge{border:1px solid #ddd;border-radius:999px;padding:6px 10px;background:#fff;cursor:pointer}
.toolbar .searchbar{flex:0 0 150px}
.toolbar .searchbar input{width:100%;padding:5px 7px;font-size:.8rem;border:1px solid #ddd;border-radius:8px}
.cat-title{font-size:1.5em;font-weight:600;color:#333}
.category{background:linear-gradient(to bottom,#f2f2f2 0%,#ffffff 100%)}
.item{display:grid;grid-template-columns:1fr auto;align-items:center;padding:10px 0;border-top:1px dashed #f0f0f0}
.item:first-of-type{border-top:0}
.name{font-size:1.25em;font-weight:600}
.right{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.priceblock{display:grid;grid-template-columns:auto auto auto auto;align-items:center;gap:8px}
.priceblock .label{color:#666}
.price{font-weight:600}
.qty{display:flex;align-items:center;border:1px solid #e1e1e1;border-radius:16px;padding:0 4px}
.qty button{border:0;background:#f5f5f5;border-radius:12px;padding:6px 8px;cursor:pointer}
.qty input{min-width:28px;height:24px;text-align:center;border:none;background:transparent;padding:0 2px;font-variant-numeric:tabular-nums}
.add{border:1px solid #ddd;background:#fff;border-radius:14px;padding:8px 12px;cursor:pointer;white-space:nowrap}
/* unified Agregar style */
.priceblock .add{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:#8b1d1d;color:#fff;border:none;cursor:pointer;
  transition:background .2s
 margin-left:8px;}
.priceblock .add:hover{background:#a62828}
.priceblock .add:disabled{background:#ccc;cursor:not-allowed}
.cartbar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #eee}
.cartbar .inner{max-width:960px;margin:0 auto;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.btn{border:1px solid #ddd;background:#fff;padding:8px 12px;border-radius:12px;cursor:pointer}
.btn.primary{background:#8b1d1d;border-color:#8b1d1d;color:#fff}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal .card{background:#fff;border-radius:16px;max-width:720px;width:100%;padding:16px;border:1px solid #eee}
.cartlist{display:flex;flex-direction:column;gap:10px}
.cartline{display:grid;grid-template-columns:1fr auto auto 36px;gap:10px;align-items:center;border-bottom:1px dashed #eee;padding-bottom:8px}
.cartline .qty{padding:0 4px}
.cartline .remove{border:0;background:#f7dede;border-radius:10px;cursor:pointer}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;background:#111;color:#fff;padding:8px 12px;border-radius:12px;opacity:0;transition:.2s;pointer-events:none}
.toast.show{opacity:1}

/* Responsive tweaks */
@media (max-width:900px){ .item{grid-template-columns:1fr} .right{gap:10px} }
@media (max-width:680px){
  h1{font-size:1.35rem}
  .titlebar{padding:0 12px;margin-bottom:12px}
  .toolbar{padding:0 12px;margin-bottom:14px}
  .toolbar .badges{margin-bottom:8px}
  .toolbar .searchbar{margin-top:8px}
  .qty button{padding:8px 10px}
  .qty input{height:28px;min-width:26px;width:30px;font-size:14px}
  .add, .btn{padding:8px 10px;border-radius:10px}
  .badge{padding:5px 9px}
  .name{font-size:1.25em;font-weight:600}
}
@media (max-width:480px){
  .item{grid-template-columns:1fr}
  .right{width:100%;justify-content:flex-end;margin-top:6px}
  .priceblock{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
  .priceblock .add{margin-left:auto}
  .qty{margin-left:8px}
}
.cartbar .summary{margin-left:auto;text-align:right}














/* Modal total styling */
.modal-total {
  text-align: right;
  font-weight: bold;
  margin-top: 10px;
  border-top: 1px solid #ddd;
  padding-top: 8px;
}
.modal-total span {
  font-weight: normal;
}


/* R21d: Ajuste de total en el modal */
.totals {
  text-align: right;
  border-top: 1px solid #ddd;
  margin-top: 8px;
  padding-top: 8px;
}
.totals > div {
  font-weight: 700;
}


/* R21e: Más espacio debajo del total y degradé más visible */
.modal form {
  margin-top: 12px;
}








/* R21f: Modal line order and styles */
.cartline{grid-template-columns:1fr auto 36px auto}
.cartline .lineprice{justify-self:end;text-align:right;font-weight:700;min-width:80px}


/* R21g: Refinar espacio en popup y ancho del total de línea */
.cartline .controls{margin-right:10px}
.cartline .remove{margin:0 8px}
.cartline .lineprice{min-width:60px}
@media (max-width:480px){
  .cartline .controls{margin-right:8px}
  .cartline .lineprice{min-width:56px}
}


/* R21i – Visual polish */
/* Tarjeta de cada producto */
.item{
  background:#fff;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  padding:8px 10px;
  margin:6px 0;
}

/* Separadores suaves entre items dentro de la categoría */
.category{padding:16px}
.item + .item{border-top:1px solid #eee}

/* Botón principal con gradiente suave */
.btn.primary{
  background:linear-gradient(to bottom,#8b1d1d,#a83232);
  border:none;
  color:#fff;
}
.btn.primary:hover{
  filter:brightness(1.03);
}

/* Títulos de categoría con barra lateral */
.cat-title{
  border-left:4px solid #8b1d1d;
  padding-left:8px;
}

/* Ajustes responsive para que las sombras no recarguen en mobile muy chico */
@media (max-width:480px){
  .item{border-radius:6px; box-shadow:0 1px 2px rgba(0,0,0,.07); padding:8px}
}