:root{--touch:44px}
html{font-size:clamp(14px,2.2vw,16px)}
body{margin:0}
.btn,button,[role="button"],a.btn{min-height:var(--touch);min-width:var(--touch);padding:.6rem 1rem;font-size:clamp(14px,2.4vw,16px)}
.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(max-width:1024px){.grid.two{grid-template-columns:1fr}}
.product-grid{display:grid;gap:.5rem}
.product-grid a.product-btn{min-height:var(--touch)}
.app-nav a{padding:.5rem .75rem}
@media(max-width:768px){
  .app-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;gap:.5rem;background:#fff;box-shadow:0 -4px 12px rgba(0,0,0,.12);padding:.5rem;z-index:1000}
  .app-content{padding-bottom:72px}
}
@media(max-width:768px){
  .app-nav.open{display:block;position:fixed;top:0;left:0;right:0;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.12);padding:.5rem;z-index:1000}
}
@media(max-width:768px){
  #mobileTabs{display:block}
  #saleLeft,#saleRight{display:block}
  body[data-view="productos"] #saleRight{display:none}
  body[data-view="carrito"] #saleLeft{display:none}
}
@media(max-width:768px){
  .table{width:100%}
  .table thead{display:none}
  .table tbody tr{display:block;background:#fff;border:1px solid #eee;border-radius:8px;margin:.5rem 0;padding:.5rem}
  .table tbody tr td{display:flex;justify-content:space-between;gap:.5rem;padding:.4rem 0}
  .table tbody tr td::before{content:attr(data-th);font-weight:700;color:#555}
}
/* ====== Ventas (Mobile First) ====== */
.sale .product-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.sale .product-grid a.product-btn{padding:12px !important; aspect-ratio:4/5 !important}
@media(min-width:1200px){.sale{--cat-size:150px}.sale .product-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1440px){.sale{--cat-size:160px}.sale .product-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1680px){.sale{--cat-size:170px}.sale .product-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1920px){.sale{--cat-size:180px}.sale .product-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:992px) and (max-width:1199px){.sale .product-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:768px) and (max-width:991px){.sale .product-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.sale .product-grid{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:540px){.sale .product-grid{grid-template-columns:repeat(2,1fr) !important}}
.sale #productSearch{width:100%}
.sale #cartBox,.sale #cartScroll,.sale .total-box,.sale .cart-total{width:100%;box-sizing:border-box}
.sale #cartScroll{max-height:50vh;overflow:auto;-webkit-overflow-scrolling:touch}
.sale #saleCartTable{min-width:560px;width:100%}
.sale .cart-total{font-size:clamp(16px,2.4vw,20px);padding:.6rem .75rem}
.sale .product-grid .name{font-size:clamp(14px,2.2vw,18px);line-height:1.25}
.sale .product-grid .price,.sale .product-grid .price-new{font-size:clamp(14px,2.4vw,20px);font-weight:700}
.sale .product-grid .add-btn{padding:.5rem .75rem;font-weight:700;border-radius:12px}
.modal-overlay .modal{max-width:95%;width:95%}
@media(min-width:1025px){.modal-overlay .modal{max-width:640px;width:auto}}