/* =========================
   Inventario Synexa
   ========================= */

.toolbar-main{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}

.toolbar-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.top-summary{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.biz-title{
  font-size:24px;
  line-height:1.2;
  font-weight:950;
  color:var(--text);
}

.summary-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(120px, 1fr));
  gap:12px;
  min-width:min(100%, 420px);
}

.summary-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
}

.summary-value{
  margin-top:8px;
  font-size:30px;
  line-height:1;
  font-weight:950;
  color:var(--text);
}

.filters-grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap:12px;
}

.checkbox-filter{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  font-weight:800;
  color:var(--text);
}

.checkbox-filter input{
  width:auto;
  margin:0;
}

.quick-scan{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:#fff;
}

.quick-scan-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.quick-scan-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.quick-scan-row input{
  flex:1;
  min-width:220px;
}

.product-card{
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  padding:16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.product-card.is-low{
  border:2px solid rgba(239,68,68,0.9);
  box-shadow: 0 0 0 4px rgba(239,68,68,0.10);
}

.product-card.is-medium{
  border:2px solid rgba(245,158,11,0.85);
  box-shadow: 0 0 0 4px rgba(245,158,11,0.08);
}

.product-name{
  font-weight:950;
  color:var(--text);
  word-break:break-word;
}

.product-meta{
  margin-top:6px;
  font-size:14px;
  color:var(--muted);
}

.product-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.product-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.product-actions-row{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

.product-actions-row .btn,
.product-actions .btn{
  padding:10px 12px;
}

.product-movements{
  margin-top:12px;
  display:none;
}

.movement-row{
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  background:#fff;
}

.movement-row + .movement-row{
  margin-top:10px;
}

.stock-badge{
  margin-left:8px;
}

.stock-badge-low{
  border-color: rgba(239,68,68,0.35);
  color: #b91c1c;
  background: rgba(239,68,68,0.10);
}

.stock-badge-medium{
  border-color: rgba(245,158,11,0.35);
  color: #b45309;
  background: rgba(245,158,11,0.10);
}

.synexa-modal{
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 16px;
  background: rgba(15,23,42,0.55);
  z-index: 999;
}

.synexa-modal.open{
  display: grid;
}

.synexa-modal-card{
  max-width: 760px;
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.synexa-modal.open .synexa-modal-card{
  animation: synexaPop .12s ease-out;
}

@keyframes synexaPop{
  from { transform: translateY(6px); opacity: .96; }
  to   { transform: translateY(0); opacity: 1; }
}

.scanner-card{
  max-width:820px;
}

.scanner-video-wrap{
  position:relative;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#0f172a;
  min-height:280px;
}

#scannerVideo{
  width:100%;
  height:min(60vh, 440px);
  object-fit:cover;
  display:block;
  background:#111827;
}

.scanner-overlay-text{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  background:rgba(15,23,42,.78);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  text-align:center;
}


@media (max-width: 980px){
  .filters-grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 820px){
  .summary-grid{
    grid-template-columns:1fr;
    min-width:0;
    width:100%;
  }

  .filters-grid{
    grid-template-columns:1fr;
  }

  .attn-grid{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  .attn-grid > :nth-child(2){
    order:-1;
  }

  .attn-price-card{
    position: sticky;
    top: 12px;
    z-index: 5;
  }
}

/* =========================
   Catálogo público / imágenes
   ========================= */

.catalog-options-box{
  display:grid;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}

.catalog-check{
  justify-content:flex-start;
}

.product-card-content{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.product-thumb{
  width:92px;
  height:92px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#f8fafc;
  object-fit:cover;
  flex:0 0 auto;
}

.product-thumb-placeholder{
  width:92px;
  height:92px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#f8fafc;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  text-align:center;
  padding:8px;
  flex:0 0 auto;
}

.catalog-badge-public{
  border-color: rgba(46,196,182,0.35);
  color: #0f766e;
  background: rgba(46,196,182,0.10);
}

.catalog-badge-private{
  border-color: rgba(100,116,139,0.35);
  color: #475569;
  background: rgba(100,116,139,0.10);
}

@media (max-width: 640px){
  .product-card-content{
    flex-direction:column;
  }

  .product-thumb,
  .product-thumb-placeholder{
    width:100%;
    height:180px;
  }
}


/* =========================
   Catálogo público
   ========================= */

.catalog-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.catalog-product-card{
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.catalog-product-img,
.catalog-product-img-placeholder{
  width:100%;
  height:220px;
  display:block;
}

.catalog-product-img{
  object-fit:cover;
  background:#f8fafc;
}

.catalog-product-img-placeholder{
  background:#f8fafc;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  text-align:center;
}

.catalog-product-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  justify-content:space-between;
  flex:1;
}

.catalog-product-title{
  font-size:20px;
  line-height:1.2;
  margin-top:10px;
  margin-bottom:0;
  color:var(--text);
}

.catalog-product-price{
  font-size:24px;
  font-weight:950;
  color:var(--text);
}

.catalog-product-stock{
  margin-top:6px;
  color:var(--muted);
  font-size:14px;
  font-weight:800;
}

@media (max-width: 980px){
  .catalog-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .catalog-grid{
    grid-template-columns:1fr;
  }

  .catalog-product-img,
  .catalog-product-img-placeholder{
    height:240px;
  }
}

/* =========================
   Carrito / pedidos
   ========================= */

.cart-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap:18px;
  align-items:start;
}

.cart-summary-card{
  position:sticky;
  top:18px;
}

.cart-summary-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
  color:var(--muted);
}

.cart-summary-row strong{
  color:var(--text);
}

.cart-summary-total{
  font-size:20px;
  color:var(--text);
}

.cart-item{
  display:grid;
  grid-template-columns:80px minmax(0, 1fr) auto auto;
  gap:14px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:#fff;
}

.cart-item-img,
.cart-item-img-placeholder{
  width:80px;
  height:80px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#f8fafc;
}

.cart-item-img{
  object-fit:cover;
}

.cart-item-img-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:12px;
  color:var(--muted);
  font-weight:900;
}

.cart-item-title{
  font-weight:950;
  color:var(--text);
}

.cart-item-meta{
  margin-top:6px;
  font-size:14px;
  color:var(--muted);
}

.cart-item-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.cart-item-actions .btn{
  padding:10px 12px;
}

.cart-item-total{
  font-weight:950;
  color:var(--text);
  text-align:right;
}

.order-card{
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
  padding:16px;
}

.order-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.order-title{
  font-weight:950;
  color:var(--text);
}

.order-meta{
  margin-top:6px;
  font-size:14px;
  color:var(--muted);
}

.order-items{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
}

.sii-box{
  width:100%;
  min-height:180px;
  font-family:monospace;
  font-size:13px;
  resize:vertical;
}

@media (max-width: 900px){
  .cart-layout{
    grid-template-columns:1fr;
  }

  .cart-summary-card{
    position:static;
  }

  .cart-item{
    grid-template-columns:72px minmax(0, 1fr);
  }

  .cart-item-actions,
  .cart-item-total{
    grid-column:1 / -1;
  }

  .cart-item-total{
    text-align:left;
  }
}

/* =========================
   Estados visuales de pedidos
   ========================= */

.order-stepper{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:16px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
}

.order-step{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:13px;
  font-weight:900;
}

.order-step span{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  color:var(--muted);
  font-weight:950;
}

.order-step-done span{
  background:rgba(46,196,182,0.12);
  border-color:rgba(46,196,182,0.45);
  color:#0f766e;
}

.order-step-done strong{
  color:#0f766e;
}

.order-step-active span{
  background:rgba(31,42,68,0.10);
  border-color:rgba(31,42,68,0.35);
  color:var(--text);
}

.order-step-active strong{
  color:var(--text);
}

.order-step-cancelled{
  color:#b91c1c;
}

.order-step-cancelled span{
  background:rgba(239,68,68,0.12);
  border-color:rgba(239,68,68,0.45);
  color:#b91c1c;
}

.order-step-cancelled strong{
  color:#b91c1c;
}

.order-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.order-actions .btn{
  padding:10px 12px;
}

@media (max-width: 760px){
  .order-stepper{
    grid-template-columns:1fr;
  }

  .order-actions{
    justify-content:flex-start;
  }
}

/* =========================
   Pedidos colapsables
   ========================= */

.order-card-collapsible{
  padding:16px;
}

.order-summary-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.order-summary-main{
  min-width:0;
  flex:1;
}

.order-summary-side{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.order-summary-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.order-stepper-compact{
  margin-top:14px;
}

.order-actions-compact{
  margin-top:14px;
  justify-content:flex-start;
}

.order-final-note{
  margin-top:14px;
  padding:10px 12px;
  border:1px solid rgba(46,196,182,0.35);
  background:rgba(46,196,182,0.10);
  color:#0f766e;
  border-radius:12px;
  font-size:13px;
  font-weight:900;
}

.order-detail{
  display:none;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border);
}

.order-detail.open{
  display:block;
}

.order-detail-section + .order-detail-section{
  margin-top:18px;
}

.order-detail-section h3{
  margin:0 0 8px;
  font-size:16px;
  color:var(--text);
}

.order-products-box{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:#fff;
}

.order-product-line{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  color:var(--muted);
}

.order-product-line + .order-product-line{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--border);
}

.order-product-line strong{
  color:var(--text);
}

.order-step-ticket span{
  background:rgba(46,196,182,0.16);
  border-color:rgba(46,196,182,0.55);
  color:#0f766e;
}

.order-step-ticket strong{
  color:#0f766e;
}

.order-card-collapsible .order-final-note + .order-detail{
  margin-top:14px;
}

@media (max-width: 760px){
  .order-summary-head{
    flex-direction:column;
  }

  .order-summary-side,
  .order-summary-side .btn{
    width:100%;
  }

  .order-summary-side .btn{
    justify-content:center;
  }
}

/* =========================
   Descuentos
   ========================= */

.discounts-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}

.modal-top-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}

.discount-modal-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.discount-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  background:#fff;
}

.discount-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}

.discount-card-main{
  flex:1;
  min-width:0;
}

.discount-code-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.discount-code{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:6px 10px;
  border-radius:10px;
  border:1px dashed var(--border);
  background:#f8fafc;
  color:var(--text);
  font-family:monospace;
  font-weight:950;
  letter-spacing:.04em;
}

.discount-card-title{
  margin-top:10px;
  font-size:18px;
  font-weight:950;
  color:var(--text);
}

.discount-card-value{
  margin-top:6px;
  font-size:28px;
  line-height:1;
  font-weight:950;
  color:var(--text);
}

.discount-card-meta{
  margin-top:8px;
  font-size:14px;
  color:var(--muted);
}

.discount-card-meta span{
  margin:0 8px;
  color:var(--border);
}

.discount-card-meta strong{
  color:var(--text);
}

.discount-card-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.discount-selector-title{
  display:block;
  margin-bottom:8px;
  font-weight:900;
}

.discount-selector-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:8px;
  max-height:260px;
  overflow:auto;
  padding:10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}

.discount-selector-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#f8fafc;
  cursor:pointer;
}

.discount-selector-item input{
  width:auto;
  margin-top:2px;
}

.discount-selector-item span{
  color:var(--text);
  font-weight:800;
}

.discount-selector-item small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-weight:700;
}

.discount-active-check{
  justify-content:flex-start;
}

@media (max-width: 760px){
  .discount-selector-list{
    grid-template-columns:1fr;
  }

  .discount-card-actions{
    width:100%;
  }

  .discount-card-actions .btn{
    flex:1;
  }
}

/* =========================
   Navegación principal inventario
   ========================= */

.inventory-header{
  position:relative;
  z-index:100;
}

.inventory-navbar{
  min-height:72px;
  gap:24px;
}

.inventory-brand{
  flex-shrink:0;
}

.inventory-brand-logo{
  width:auto;
  height:40px;
  display:block;
}

.inventory-brand-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.inventory-brand-text > strong{
  color:var(--text);
  font-weight:950;
  line-height:1.15;
}

.inventory-business-name{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-weight:800;
  max-width:220px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* =========================
   Navegación escritorio
   ========================= */

.inventory-desktop-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  margin-left:auto;
}

.inventory-nav-link{
  appearance:none;
  border:0;
  background:transparent;
  min-height:42px;
  padding:9px 11px;
  border-radius:10px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  color:var(--muted);
  font:inherit;
  font-size:14px;
  font-weight:850;
  text-decoration:none;

  cursor:pointer;

  transition:
    background .15s ease,
    color .15s ease;
}

.inventory-nav-link:hover{
  background:#f8fafc;
  color:var(--text);
}

.inventory-nav-icon{
  width:18px;
  min-width:18px;
  text-align:center;
  color:var(--muted);
  font-weight:950;
}

.inventory-logout-btn{
  margin-left:4px;
  min-height:42px;
  padding-inline:16px;
}


/* =========================
   Menú "Más"
   ========================= */

.inventory-more-menu{
  position:relative;
}

.inventory-more-menu > summary{
  list-style:none;
}

.inventory-more-menu > summary::-webkit-details-marker{
  display:none;
}

.inventory-more-trigger{
  user-select:none;
}

.inventory-more-arrow{
  display:inline-block;
  margin-left:2px;
  transition:transform .15s ease;
}

.inventory-more-menu[open] .inventory-more-arrow{
  transform:rotate(180deg);
}

.inventory-more-menu[open] .inventory-more-trigger{
  background:#f8fafc;
  color:var(--text);
}

.inventory-more-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  right:0;

  width:310px;
  padding:8px;

  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:
    0 18px 45px rgba(15,23,42,.14),
    0 4px 12px rgba(15,23,42,.05);

  z-index:200;
}

.inventory-menu-item{
  width:100%;
  border:0;
  background:transparent;
  border-radius:11px;
  padding:10px;

  display:flex;
  align-items:flex-start;
  gap:10px;

  text-align:left;
  color:var(--text);
  text-decoration:none;
  font:inherit;

  cursor:pointer;

  transition:background .15s ease;
}

.inventory-menu-item:hover{
  background:#f8fafc;
}

.inventory-menu-icon{
  width:30px;
  height:30px;
  min-width:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--border);
  border-radius:9px;
  background:#fff;

  color:var(--muted);
  font-size:14px;
  font-weight:950;
}

.inventory-menu-item > span:last-child{
  min-width:0;
}

.inventory-menu-item strong{
  display:block;
  color:var(--text);
  font-size:14px;
  font-weight:900;
  line-height:1.25;
}

.inventory-menu-item small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.inventory-menu-divider{
  height:1px;
  margin:6px 4px;
  background:var(--border);
}


/* =========================
   Navegación móvil inventario
   ========================= */

.inventory-mobile-panel{
  gap:14px;
}

.inventory-mobile-group{
  display:grid;
  gap:4px;
}

.inventory-mobile-label{
  padding:4px 2px 6px;
  color:var(--muted);
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.inventory-mobile-item{
  width:100%;
  min-height:44px;
  padding:10px 12px;

  display:flex;
  align-items:center;
  gap:10px;

  border:0;
  border-radius:11px;
  background:transparent;

  color:var(--text);
  font:inherit;
  font-size:14px;
  font-weight:850;
  text-decoration:none;
  text-align:left;

  cursor:pointer;

  transition:background .15s ease;
}

.inventory-mobile-item:hover,
.inventory-mobile-item:focus-visible{
  background:#f8fafc;
}

.inventory-mobile-item > span{
  width:22px;
  min-width:22px;
  text-align:center;
  color:var(--muted);
  font-weight:950;
}

.inventory-mobile-logout{
  width:100%;
  margin-top:4px;
}


/* =========================
   Responsive navegación
   ========================= */

@media (max-width: 1100px){
  .inventory-nav-link{
    padding-inline:9px;
  }

  .inventory-nav-icon{
    display:none;
  }
}

@media (max-width: 900px){
  .inventory-desktop-nav{
    display:none;
  }
}

@media (max-width: 560px){
  .inventory-navbar{
    min-height:64px;
  }

  .inventory-brand-logo{
    height:36px;
  }

  .inventory-brand-text > strong{
    font-size:14px;
  }

  .inventory-business-name{
    max-width:180px;
    font-size:11px;
  }
}

/* =========================
   Cupones en carrito
   ========================= */

.coupon-box{
  margin-top:16px;
  margin-bottom:16px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#f8fafc;
}

.coupon-row{
  display:flex;
  gap:8px;
}

.coupon-row input{
  min-width:0;
  flex:1;
  text-transform:uppercase;
}

.coupon-row .btn{
  flex-shrink:0;
}

.coupon-applied-box{
  margin-top:10px;
  padding:10px 12px;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;

  border:1px solid rgba(46,196,182,.35);
  border-radius:12px;

  background:rgba(46,196,182,.08);
}

.coupon-applied-box strong{
  display:block;
  color:#0f766e;
  font-weight:950;
}

.coupon-applied-box .small{
  display:block;
  margin-top:2px;
  color:#0f766e;
}

.coupon-remove-btn{
  width:30px;
  height:30px;
  flex:0 0 30px;

  border:0;
  border-radius:999px;

  background:rgba(15,118,110,.10);

  color:#0f766e;
  font-size:20px;
  line-height:1;

  cursor:pointer;
}

.coupon-remove-btn:hover{
  background:rgba(15,118,110,.18);
}

.cart-discount-row{
  color:#0f766e;
}

.cart-discount-row strong{
  color:#0f766e;
}

@media (max-width: 520px){
  .coupon-row{
    flex-direction:column;
  }

  .coupon-row .btn{
    width:100%;
  }
}

/* =========================
   Configuración de tienda
   ========================= */

.config-container{
  max-width:1000px;
}

.config-page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.config-save-top{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.config-save-status{
  min-height:18px;
  font-weight:850;
}

.config-save-status.is-unsaved{
  color:#b45309;
}

.config-save-status.is-saved{
  color:#0f766e;
}

.config-save-status.is-saving{
  color:var(--muted);
}

.config-section-card{
  margin-bottom:18px;
}

.config-section-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:20px;
}

.config-section-head h2{
  margin:0;
}

.config-section-head p{
  margin:6px 0 0;
}

.config-section-icon{
  width:34px;
  height:34px;
  min-width:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;

  background:rgba(31,42,68,.08);

  color:var(--text);

  font-size:14px;
  font-weight:950;
}

.config-form-grid{
  gap:14px;
}

.config-label{
  display:block;
  margin-bottom:6px;

  color:var(--text);

  font-size:13px;
  font-weight:900;
}

.config-field-help{
  margin-top:6px;
}


/* =========================
   Opciones de entrega
   ========================= */

.config-delivery-option{
  padding:16px;

  border:1px solid var(--border);
  border-radius:16px;

  background:#fff;
}

.config-delivery-option + .config-delivery-option{
  margin-top:12px;
}

.config-toggle-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.config-toggle-row p{
  margin:5px 0 0;
}

.config-option-title{
  color:var(--text);

  font-size:16px;
  font-weight:950;
}

.config-option-settings{
  margin-top:16px;
  padding-top:16px;

  border-top:1px solid var(--border);

  transition:
    opacity .15s ease;
}

.config-option-settings.is-disabled{
  opacity:.45;
}


/* =========================
   Switch
   ========================= */

.config-switch{
  position:relative;

  width:48px;
  height:28px;

  flex:0 0 48px;

  cursor:pointer;
}

.config-switch input{
  position:absolute;

  width:1px;
  height:1px;

  opacity:0;
}

.config-switch-slider{
  position:absolute;
  inset:0;

  border-radius:999px;

  background:#cbd5e1;

  transition:
    background .18s ease;
}

.config-switch-slider::after{
  content:"";

  position:absolute;

  width:22px;
  height:22px;

  left:3px;
  top:3px;

  border-radius:999px;

  background:#fff;

  box-shadow:
    0 2px 6px rgba(15,23,42,.18);

  transition:
    transform .18s ease;
}

.config-switch input:checked + .config-switch-slider{
  background:#0f766e;
}

.config-switch input:checked + .config-switch-slider::after{
  transform:translateX(20px);
}

.config-switch input:focus-visible + .config-switch-slider{
  outline:3px solid rgba(15,118,110,.2);
}


/* =========================
   Inputs monetarios
   ========================= */

.config-money-input{
  display:flex;
  align-items:center;

  border:1px solid var(--border);
  border-radius:12px;

  background:#fff;

  overflow:hidden;
}

.config-money-input:focus-within{
  border-color:rgba(31,42,68,.45);

  box-shadow:
    0 0 0 3px rgba(31,42,68,.08);
}

.config-money-input > span{
  padding-left:12px;

  color:var(--muted);

  font-weight:900;
}

.config-money-input input{
  border:0;
  box-shadow:none;
}

.config-money-input input:focus{
  box-shadow:none;
}


/* =========================
   Checkbox IVA
   ========================= */

.config-checkbox-card{
  display:flex;
  align-items:flex-start;
  gap:12px;

  padding:14px;

  border:1px solid var(--border);
  border-radius:14px;

  background:#fff;

  cursor:pointer;
}

.config-checkbox-card input{
  width:auto;
  margin-top:3px;
}

.config-checkbox-card strong{
  display:block;

  color:var(--text);

  font-weight:950;
}

.config-checkbox-card small{
  display:block;

  margin-top:4px;

  color:var(--muted);

  line-height:1.5;
}

.config-info-box{
  margin-top:12px;
  padding:12px 14px;

  border:1px solid rgba(31,42,68,.12);
  border-radius:12px;

  background:#f8fafc;
}

.config-info-box strong{
  color:var(--text);
}

.config-info-box p{
  margin:5px 0 0;
}


/* =========================
   Preview configuración
   ========================= */

.config-preview{
  max-width:560px;

  border:1px solid var(--border);
  border-radius:16px;

  background:#fff;

  padding:16px;
}

.config-preview-business{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.config-preview-business strong{
  color:var(--text);

  font-size:18px;
  font-weight:950;
}

.config-preview-divider{
  height:1px;

  margin:14px 0;

  background:var(--border);
}

.config-preview-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;

  padding:6px 0;

  color:var(--muted);

  font-size:14px;
}

.config-preview-row strong{
  color:var(--text);
}

.config-preview-highlight strong{
  color:#0f766e;
}

.config-preview-empty{
  color:var(--muted);

  font-size:14px;
}


/* =========================
   Guardar inferior
   ========================= */

.config-bottom-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;

  padding:16px 0 4px;
}


/* =========================
   Responsive configuración
   ========================= */

@media (max-width: 700px){

  .config-page-head{
    flex-direction:column;
  }

  .config-save-top{
    width:100%;
  }

  .config-save-top .btn{
    width:100%;
  }

  .config-toggle-row{
    align-items:center;
  }

  .config-bottom-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .config-bottom-actions .btn{
    width:100%;
  }

  .config-preview{
    max-width:none;
  }

}

/* =========================
   Métodos de entrega / checkout
   ========================= */

.checkout-section-card{
  overflow:visible;
}

.delivery-methods{
  display:grid;
  gap:10px;
  margin-top:16px;
}

.delivery-method-card{
  width:100%;
  padding:14px;

  display:grid;
  grid-template-columns:34px minmax(0, 1fr) auto;
  align-items:center;
  gap:12px;

  border:1px solid var(--border);
  border-radius:14px;

  background:#fff;

  color:var(--text);
  text-align:left;
  font:inherit;

  cursor:pointer;

  transition:
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

.delivery-method-card:hover{
  border-color:rgba(31,42,68,.3);
  background:#f8fafc;
}

.delivery-method-card.is-selected{
  border-color:rgba(15,118,110,.45);

  background:
    rgba(46,196,182,.06);

  box-shadow:
    0 0 0 3px
    rgba(46,196,182,.08);
}

.delivery-method-radio{
  width:28px;
  height:28px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--border);
  border-radius:999px;

  background:#fff;

  color:#0f766e;
  font-size:13px;
  font-weight:950;
}

.delivery-method-card.is-selected
.delivery-method-radio{
  border-color:rgba(15,118,110,.4);

  background:
    rgba(46,196,182,.12);
}

.delivery-method-content{
  min-width:0;
}

.delivery-method-content strong{
  display:block;

  color:var(--text);
  font-weight:950;
}

.delivery-method-content small{
  display:block;

  margin-top:4px;

  color:var(--muted);

  line-height:1.45;
}

.delivery-method-price{
  color:var(--text);
  font-weight:950;
  white-space:nowrap;
}

.delivery-empty-state{
  padding:14px;

  border:1px dashed var(--border);
  border-radius:14px;

  color:var(--muted);

  text-align:center;
  font-size:14px;
}


/* =========================
   Dirección despacho
   ========================= */

.shipping-address-box{
  padding:14px;

  border:1px solid var(--border);
  border-radius:14px;

  background:#f8fafc;
}

.shipping-address-head strong{
  color:var(--text);
  font-weight:950;
}


/* =========================
   Retiro
   ========================= */

.pickup-info-box{
  padding:14px;

  border:1px solid
    rgba(46,196,182,.35);

  border-radius:14px;

  background:
    rgba(46,196,182,.07);
}

.pickup-info-box strong{
  color:#0f766e;
  font-weight:950;
}

.pickup-address-text{
  margin-top:8px;
  color:#0f766e;
  font-weight:850;
}


/* =========================
   Envío gratis
   ========================= */

.free-shipping-notice{
  margin-top:10px;
  padding:10px 12px;

  border:1px solid
    rgba(46,196,182,.35);

  border-radius:12px;

  background:
    rgba(46,196,182,.08);

  color:#0f766e;

  font-size:13px;
  font-weight:900;
}


/* =========================
   Resumen método elegido
   ========================= */

.selected-delivery-summary{
  margin-top:12px;
  padding:11px 12px;

  border:1px solid var(--border);
  border-radius:12px;

  background:#f8fafc;
}

.selected-delivery-summary strong{
  display:block;

  color:var(--text);

  font-size:13px;
  font-weight:950;
}

.selected-delivery-summary span{
  display:block;

  margin-top:3px;

  color:var(--muted);

  font-size:12px;
  font-weight:800;
}


/* =========================
   Responsive
   ========================= */

@media (max-width: 600px){

  .delivery-method-card{
    grid-template-columns:
      30px minmax(0, 1fr);
  }

  .delivery-method-price{
    grid-column:2;
  }

}

/* =========================================================
   NUEVO CENTRO DE GESTIÓN DE PEDIDOS
   v2.4.0
   ========================================================= */


/* =========================
   Contenedor
   ========================= */

.orders-page-container{
  max-width:1180px;
}


.orders-page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}


/* =========================
   Métricas
   ========================= */

.orders-stats-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:14px;
  margin-top:26px;
}


.orders-stat-card{
  display:flex;
  align-items:center;
  gap:13px;

  min-width:0;
  padding:17px;

  border:1px solid var(--border);
  border-radius:17px;

  background:#fff;

  box-shadow:
    0 8px 24px rgba(15,23,42,.045);
}


.orders-stat-icon{
  width:42px;
  height:42px;
  min-width:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;

  background:#f1f5f9;

  color:var(--text);

  font-size:15px;
  font-weight:950;
}


.orders-stat-label{
  color:var(--muted);

  font-size:12px;
  font-weight:850;
}


.orders-stat-value{
  margin-top:3px;

  color:var(--text);

  font-size:25px;
  line-height:1.1;
  font-weight:950;

  word-break:break-word;
}


.orders-stat-help{
  margin-top:4px;

  color:var(--muted);

  font-size:11px;
  font-weight:700;
}


.orders-stat-card-sales
.orders-stat-icon{
  color:#0f766e;

  background:rgba(46,196,182,.11);
}


/* =========================
   Tabs etapas
   ========================= */

.orders-stage-wrapper{
  margin-top:22px;

  overflow:hidden;

  border:1px solid var(--border);
  border-radius:16px;

  background:#fff;
}


.orders-stage-tabs{
  display:flex;

  padding:7px;

  overflow-x:auto;

  scrollbar-width:thin;
}


.orders-stage-tab{
  min-height:42px;

  padding:8px 12px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  flex:0 0 auto;

  border:0;
  border-radius:10px;

  background:transparent;

  color:var(--muted);

  font:inherit;
  font-size:13px;
  font-weight:850;

  cursor:pointer;

  transition:
    background .15s ease,
    color .15s ease;
}


.orders-stage-tab:hover{
  color:var(--text);

  background:#f8fafc;
}


.orders-stage-tab.is-active{
  color:var(--text);

  background:#eef2f7;
}


.orders-stage-tab strong{
  min-width:23px;
  height:23px;

  padding:0 6px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid var(--border);
  border-radius:999px;

  background:#fff;

  color:var(--muted);

  font-size:11px;
  font-weight:950;
}


.orders-stage-tab.is-active strong{
  color:var(--text);
}


/* =========================
   Toolbar
   ========================= */

.orders-toolbar{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;

  margin-top:16px;
}


.orders-search-wrap input{
  width:100%;
}


.orders-status-message{
  min-height:18px;

  margin-top:13px;
}


/* =========================
   Lista
   ========================= */

.orders-list{
  display:grid;
  gap:13px;

  margin-top:14px;
}


/* =========================
   Card pedido
   ========================= */

.order-management-card{
  overflow:hidden;

  border:1px solid var(--border);
  border-radius:18px;

  background:#fff;

  box-shadow:
    0 8px 26px rgba(15,23,42,.045);

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}


.order-management-card:hover{
  border-color:rgba(31,42,68,.18);

  box-shadow:
    0 12px 30px rgba(15,23,42,.065);
}


.order-management-card.is-open{
  border-color:rgba(31,42,68,.24);
}


/* =========================
   Cabecera pedido
   ========================= */

.order-management-head{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:18px;

  padding:18px;
}


.order-management-main{
  min-width:0;
}


.order-management-topline{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}


.order-relative-time{
  color:var(--muted);

  font-size:12px;
  font-weight:800;
}


/* =========================
   Estado
   ========================= */

.order-status-pill{
  display:inline-flex;
  align-items:center;

  min-height:25px;

  padding:4px 8px;

  border:1px solid var(--border);
  border-radius:999px;

  font-size:11px;
  font-weight:900;
}


.order-status-reserved{
  color:#92400e;

  border-color:rgba(245,158,11,.3);

  background:rgba(245,158,11,.09);
}


.order-status-confirmed{
  color:#1d4ed8;

  border-color:rgba(59,130,246,.28);

  background:rgba(59,130,246,.08);
}


.order-status-preparing{
  color:#6d28d9;

  border-color:rgba(124,58,237,.25);

  background:rgba(124,58,237,.08);
}


.order-status-delivered{
  color:#0f766e;

  border-color:rgba(46,196,182,.35);

  background:rgba(46,196,182,.09);
}


.order-status-cancelled{
  color:#b91c1c;

  border-color:rgba(239,68,68,.3);

  background:rgba(239,68,68,.08);
}


.order-status-neutral{
  color:var(--muted);

  border-color:var(--border);

  background:#f8fafc;
}


/* =========================
   Cliente + total
   ========================= */

.order-customer-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;

  margin-top:8px;
}


.order-customer-name{
  margin:0;

  color:var(--text);

  font-size:19px;
  line-height:1.25;
  font-weight:950;
}


.order-management-id{
  margin-top:4px;

  color:var(--muted);

  font-size:12px;
  font-weight:750;
}


.order-management-id span{
  color:var(--text);

  font-family:monospace;
}


.order-management-total{
  flex:0 0 auto;

  color:var(--text);

  font-size:21px;
  line-height:1.2;
  font-weight:950;

  white-space:nowrap;
}


/* =========================
   Chips
   ========================= */

.order-management-info{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;

  margin-top:12px;
}


.order-info-chip{
  min-height:29px;

  padding:5px 9px;

  display:inline-flex;
  align-items:center;
  gap:6px;

  border:1px solid var(--border);
  border-radius:999px;

  background:#f8fafc;

  color:var(--muted);

  font-size:12px;
}


.order-info-chip strong{
  color:var(--text);

  font-weight:850;
}


.order-info-chip-discount{
  border-color:rgba(46,196,182,.3);

  background:rgba(46,196,182,.07);
}


.order-info-chip-discount strong{
  color:#0f766e;
}


/* =========================
   Entrega preview
   ========================= */

.order-delivery-preview{
  margin-top:9px;

  color:var(--muted);

  font-size:12px;
  line-height:1.45;

  overflow-wrap:anywhere;
}


/* =========================
   Acciones card
   ========================= */

.order-management-actions{
  min-width:190px;

  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:9px;
}


.order-management-actions .btn{
  justify-content:center;

  white-space:nowrap;
}


.order-primary-action{
  min-width:190px;
}


/* =========================
   Detalle
   ========================= */

.order-management-detail{
  display:none;

  padding:18px;

  border-top:1px solid var(--border);

  background:#fbfcfe;
}


.order-management-detail.open{
  display:grid;
  gap:14px;
}


.order-detail-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}


.order-detail-panel{
  padding:15px;

  border:1px solid var(--border);
  border-radius:15px;

  background:#fff;
}


.order-detail-panel h3{
  margin:0 0 12px;

  color:var(--text);

  font-size:15px;
  font-weight:950;
}


/* =========================
   Datos detalle
   ========================= */

.order-detail-data{
  display:grid;
  gap:10px;
}


.order-detail-data > div{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}


.order-detail-data span{
  color:var(--muted);

  font-size:12px;
}


.order-detail-data strong{
  color:var(--text);

  font-size:13px;
  text-align:right;

  overflow-wrap:anywhere;
}


.order-contact-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;

  margin-top:13px;
}


.order-contact-actions .btn{
  padding:9px 11px;
}


/* =========================
   Entrega detalle
   ========================= */

.order-delivery-detail{
  display:flex;
  align-items:flex-start;
  gap:12px;
}


.order-delivery-icon{
  width:38px;
  height:38px;
  min-width:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  background:#f1f5f9;

  font-size:17px;
}


.order-delivery-detail strong{
  display:block;

  color:var(--text);

  font-weight:950;
}


.order-delivery-detail p{
  margin:4px 0 0;

  color:var(--muted);

  font-size:13px;
  line-height:1.5;
}


.order-notes-box{
  margin-top:12px;
  padding:11px;

  border:1px solid var(--border);
  border-radius:12px;

  background:#f8fafc;
}


.order-notes-box strong{
  color:var(--text);

  font-size:12px;
}


.order-notes-box p{
  margin:4px 0 0;

  color:var(--muted);

  font-size:13px;
  line-height:1.45;
}


/* =========================
   Productos
   ========================= */

.order-products-box{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;

  background:#fff;
}


.order-product-line{
  display:flex;
  justify-content:space-between;
  gap:12px;

  font-size:14px;
  color:var(--muted);
}


.order-product-line + .order-product-line{
  margin-top:8px;
  padding-top:8px;

  border-top:1px solid var(--border);
}


.order-product-line strong{
  color:var(--text);
}


/* =========================
   Totales
   ========================= */

.order-totals-box{
  display:grid;
  gap:9px;
}


.order-totals-box > div{
  display:flex;
  justify-content:space-between;
  gap:16px;

  color:var(--muted);

  font-size:13px;
}


.order-totals-box strong{
  color:var(--text);
}


.order-total-discount,
.order-total-discount strong{
  color:#0f766e !important;
}


.order-total-final{
  margin-top:4px;
  padding-top:10px;

  border-top:1px solid var(--border);

  color:var(--text) !important;

  font-size:15px !important;
}


.order-total-final strong{
  font-size:18px;
  font-weight:950;
}


/* =========================
   SII
   ========================= */

.sii-box{
  width:100%;
  min-height:180px;

  font-family:monospace;
  font-size:13px;

  resize:vertical;
}


/* =========================
   Cancelar
   ========================= */

.order-secondary-actions{
  display:flex;
  justify-content:flex-end;
}


.order-cancel-action{
  border:0;
  background:transparent;

  padding:8px;

  color:#b91c1c;

  font:inherit;
  font-size:12px;
  font-weight:850;

  cursor:pointer;
}


.order-cancel-action:hover{
  text-decoration:underline;
}


/* =========================
   Vacío
   ========================= */

.orders-empty-state{
  padding:42px 20px;

  border:1px dashed var(--border);
  border-radius:18px;

  background:#fff;

  text-align:center;
}


.orders-empty-icon{
  font-size:30px;
}


.orders-empty-state strong{
  display:block;

  margin-top:10px;

  color:var(--text);

  font-size:16px;
  font-weight:950;
}


.orders-empty-state p{
  margin:6px 0 0;

  color:var(--muted);

  font-size:13px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:1000px){

  .orders-stats-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

}


@media (max-width:760px){

  .orders-toolbar{
    grid-template-columns:1fr;
  }


  .orders-toolbar .btn{
    width:100%;
    justify-content:center;
  }


  .order-management-head{
    grid-template-columns:1fr;
  }


  .order-management-actions{
    width:100%;
    min-width:0;

    flex-direction:row;
    flex-wrap:wrap;
  }


  .order-management-actions .btn,
  .order-primary-action{
    flex:1;

    min-width:150px;
  }


  .order-detail-grid{
    grid-template-columns:1fr;
  }

}


@media (max-width:560px){

  .orders-stats-grid{
    grid-template-columns:1fr 1fr;

    gap:10px;
  }


  .orders-stat-card{
    padding:13px;

    align-items:flex-start;
  }


  .orders-stat-icon{
    width:34px;
    height:34px;
    min-width:34px;

    font-size:12px;
  }


  .orders-stat-value{
    font-size:20px;
  }


  .orders-stat-help{
    display:none;
  }


  .order-management-head{
    padding:15px;
  }


  .order-customer-row{
    flex-direction:column;

    gap:7px;
  }


  .order-management-total{
    font-size:20px;
  }


  .order-management-actions{
    flex-direction:column;
  }


  .order-management-actions .btn,
  .order-primary-action{
    width:100%;

    min-width:0;
  }


  .order-management-detail{
    padding:12px;
  }


  .order-detail-data > div{
    flex-direction:column;

    gap:3px;
  }


  .order-detail-data strong{
    text-align:left;
  }


  .order-contact-actions{
    flex-direction:column;
  }


  .order-contact-actions .btn{
    width:100%;

    justify-content:center;
  }

}


/* =========================================================
   VENTAS POR EMITIR
   v2.5.0
   ========================================================= */


.sales-page-container{
  max-width:1100px;
}


.sales-page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap;
}


/* =========================
   Aviso informativo
   ========================= */

.sales-info-banner{
  display:flex;
  align-items:flex-start;
  gap:12px;

  margin-top:22px;
  padding:14px 16px;

  border:1px solid rgba(59,130,246,.2);
  border-radius:15px;

  background:rgba(59,130,246,.055);
}


.sales-info-icon{
  width:32px;
  height:32px;
  min-width:32px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:10px;

  background:rgba(59,130,246,.11);

  color:#1d4ed8;

  font-weight:950;
}


.sales-info-banner strong{
  display:block;

  color:var(--text);

  font-weight:950;
}


.sales-info-banner p{
  margin:4px 0 0;

  color:var(--muted);

  font-size:13px;
  line-height:1.5;
}


/* =========================
   Estadísticas
   ========================= */

.sales-stats-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;

  margin-top:18px;
}


.sales-stat-card{
  padding:17px;

  border:1px solid var(--border);
  border-radius:17px;

  background:#fff;

  box-shadow:
    0 8px 24px rgba(15,23,42,.04);
}


.sales-stat-label{
  color:var(--muted);

  font-size:12px;
  font-weight:850;
}


.sales-stat-value{
  margin-top:5px;

  color:var(--text);

  font-size:27px;
  line-height:1.1;
  font-weight:950;
}


.sales-stat-help{
  margin-top:5px;

  color:var(--muted);

  font-size:11px;
  font-weight:700;
}


.sales-stat-card-highlight{
  border-color:rgba(46,196,182,.28);

  background:rgba(46,196,182,.04);
}


.sales-stat-card-highlight
.sales-stat-value{
  color:#0f766e;
}


/* =========================
   Tabs
   ========================= */

.sales-tabs-wrapper{
  margin-top:20px;

  overflow:hidden;

  border:1px solid var(--border);
  border-radius:15px;

  background:#fff;
}


.sales-tabs{
  display:flex;
  gap:3px;

  padding:7px;

  overflow-x:auto;
}


.sales-tab{
  min-height:40px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  flex:0 0 auto;

  padding:8px 12px;

  border:0;
  border-radius:10px;

  background:transparent;

  color:var(--muted);

  font:inherit;
  font-size:13px;
  font-weight:850;

  cursor:pointer;
}


.sales-tab:hover{
  color:var(--text);

  background:#f8fafc;
}


.sales-tab.is-active{
  color:var(--text);

  background:#eef2f7;
}


.sales-tab strong{
  min-width:23px;
  height:23px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 6px;

  border:1px solid var(--border);
  border-radius:999px;

  background:#fff;

  color:var(--muted);

  font-size:11px;
  font-weight:950;
}


/* =========================
   Toolbar
   ========================= */

.sales-toolbar{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:12px;

  margin-top:16px;
}


.sales-toolbar input{
  width:100%;
}


.sales-status-message{
  min-height:18px;

  margin-top:13px;
}


/* =========================
   Lista
   ========================= */

.sales-list{
  display:grid;
  gap:12px;

  margin-top:14px;
}


/* =========================
   Card
   ========================= */

.sales-card{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:18px;

  padding:17px;

  border:1px solid var(--border);
  border-radius:17px;

  background:#fff;

  box-shadow:
    0 8px 24px rgba(15,23,42,.04);
}


.sales-card.is-pending{
  border-left:
    4px solid
    rgba(245,158,11,.7);
}


.sales-card.is-issued{
  border-left:
    4px solid
    rgba(46,196,182,.8);
}


.sales-card-main{
  min-width:0;
}


.sales-card-topline{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
}


.sales-document-status{
  display:inline-flex;
  align-items:center;

  min-height:25px;

  padding:4px 8px;

  border-radius:999px;

  font-size:11px;
  font-weight:900;
}


.sales-document-status.is-pending{
  color:#92400e;

  border:1px solid rgba(245,158,11,.3);

  background:rgba(245,158,11,.09);
}


.sales-document-status.is-issued{
  color:#0f766e;

  border:1px solid rgba(46,196,182,.35);

  background:rgba(46,196,182,.09);
}


.sales-card-date{
  color:var(--muted);

  font-size:12px;
  font-weight:750;
}


/* =========================
   Cliente
   ========================= */

.sales-customer-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;

  margin-top:9px;
}


.sales-customer-name{
  margin:0;

  color:var(--text);

  font-size:18px;
  line-height:1.25;
  font-weight:950;
}


.sales-order-id{
  margin-top:4px;

  color:var(--muted);

  font-size:12px;
}


.sales-order-id span{
  color:var(--text);

  font-family:monospace;
}


.sales-card-total{
  flex:0 0 auto;

  color:var(--text);

  font-size:21px;
  line-height:1.2;
  font-weight:950;

  white-space:nowrap;
}


.sales-card-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;

  margin-top:11px;
}


.sales-card-meta span{
  padding:5px 8px;

  border:1px solid var(--border);
  border-radius:999px;

  background:#f8fafc;

  color:var(--muted);

  font-size:11px;
  font-weight:800;
}


/* =========================
   Acciones
   ========================= */

.sales-card-actions{
  min-width:180px;

  display:flex;
  justify-content:flex-end;
}


.sales-card-actions .btn{
  justify-content:center;

  white-space:nowrap;
}


.sales-issued-data{
  text-align:right;
}


.sales-issued-data span{
  display:block;

  color:var(--muted);

  font-size:11px;
}


.sales-issued-data strong{
  display:block;

  margin-top:3px;

  color:#0f766e;

  font-size:13px;
  font-weight:950;
}


/* =========================
   Modal emisión
   ========================= */

.sales-issue-modal{
  max-width:620px;
}


.sales-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
}


.sales-modal-head h2{
  margin:0;
}


.sales-issue-summary{
  margin-top:18px;
  padding:12px 14px;

  display:flex;
  justify-content:space-between;
  gap:12px;

  border:1px solid var(--border);
  border-radius:13px;

  background:#f8fafc;
}


.sales-issue-summary span{
  color:var(--muted);

  font-size:13px;
}


.sales-issue-summary strong{
  color:var(--text);

  font-family:monospace;
}


.sales-issue-grid{
  margin-top:16px;
}


.sales-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;

  margin-top:18px;
}


/* =========================
   Vacío
   ========================= */

.sales-empty-state{
  padding:42px 20px;

  border:1px dashed var(--border);
  border-radius:18px;

  background:#fff;

  text-align:center;
}


.sales-empty-icon{
  font-size:30px;
}


.sales-empty-state strong{
  display:block;

  margin-top:10px;

  color:var(--text);

  font-size:16px;
  font-weight:950;
}


.sales-empty-state p{
  margin:6px 0 0;

  color:var(--muted);

  font-size:13px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:760px){

  .sales-stats-grid{
    grid-template-columns:1fr;
  }


  .sales-toolbar{
    grid-template-columns:1fr;
  }


  .sales-toolbar .btn{
    width:100%;

    justify-content:center;
  }


  .sales-card{
    grid-template-columns:1fr;
  }


  .sales-card-actions{
    width:100%;
    min-width:0;
  }


  .sales-card-actions .btn{
    width:100%;
  }


  .sales-issued-data{
    width:100%;

    text-align:left;
  }

}


@media (max-width:520px){

  .sales-customer-row{
    flex-direction:column;

    gap:6px;
  }


  .sales-modal-actions{
    flex-direction:column-reverse;
  }


  .sales-modal-actions .btn{
    width:100%;

    justify-content:center;
  }

}

/* =========================================================
   NAVEGACIÓN COMPARTIDA SYNEXA
   v2.7.0
   ========================================================= */


/* =========================
   Estado activo escritorio
   ========================= */

.inventory-nav-link.is-active{
  color: var(--text);
  background: rgba(0, 0, 0, 0.055);
  box-shadow:
    inset 0 -2px 0 var(--primary);
}


.inventory-more-menu.has-active-page
.inventory-more-trigger{
  color: var(--text);
  background: rgba(0, 0, 0, 0.04);
}


.inventory-menu-item.is-active{
  background: rgba(0, 0, 0, 0.055);
}


.inventory-menu-item.is-active strong{
  color: var(--primary);
}



/* =========================
   Acciones de página
   ========================= */

.inventory-page-actions{
  align-items: center;
}


.inventory-page-more{
  position: relative;
}


.inventory-page-more > summary{
  list-style: none;
}


.inventory-page-more > summary::-webkit-details-marker{
  display: none;
}


.inventory-page-more-trigger{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
}


.inventory-page-actions-dropdown{
  position: absolute;
  z-index: 60;

  top: calc(100% + 10px);
  right: 0;

  width: min(320px, calc(100vw - 32px));

  padding: 8px;

  border: 1px solid var(--border);
  border-radius: 16px;

  background: var(--surface);

  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.12);
}



/* =========================
   Estado activo móvil
   ========================= */

.inventory-mobile-item.is-active{
  background: rgba(0, 0, 0, 0.055);
  color: var(--primary);
  font-weight: 900;
}



/* =========================
   Menú móvil compartido
   ========================= */

.inventory-mobile-panel{
  display: none;
}


.inventory-mobile-panel.is-open{
  display: block;
}



/* =========================
   Responsive acciones
   ========================= */

@media (max-width: 760px){

  .inventory-page-actions{
    width: 100%;
  }


  .inventory-page-actions > .btn{
    flex: 1;
  }


  .inventory-page-more{
    flex: 1;
  }


  .inventory-page-more-trigger{
    width: 100%;
  }


  .inventory-page-actions-dropdown{
    right: 0;
    width: min(
      320px,
      calc(100vw - 32px)
    );
  }

}


@media (max-width: 520px){

  .inventory-page-actions{
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }


  .inventory-page-actions > .btn,
  .inventory-page-more,
  .inventory-page-more-trigger{
    width: 100%;
  }


  .inventory-page-actions-dropdown{
    left: 0;
    right: auto;
    width: 100%;
    min-width: 260px;
  }

}

/* =========================================================
   ESTADÍSTICAS SYNEXA
   v2.8.0
   ========================================================= */


.statistics-page-container{
  display: grid;
  gap: 24px;
}


.statistics-page-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}


.statistics-page-head h1{
  margin-top: 6px;
  margin-bottom: 8px;
}



/* =========================
   Métricas principales
   ========================= */

.statistics-main-grid{
  display: grid;
  grid-template-columns:
    repeat(4, minmax(0, 1fr));
  gap: 14px;
}


.statistics-main-card{
  display: flex;
  align-items: flex-start;
  gap: 14px;

  min-width: 0;

  padding: 18px;

  border: 1px solid var(--border);
  border-radius: 18px;

  background: var(--surface);
}


.statistics-main-icon{
  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: rgba(31, 42, 68, 0.08);

  color: var(--text);

  font-weight: 950;
  font-size: 17px;
}


.statistics-main-label{
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}


.statistics-main-value{
  margin-top: 5px;

  color: var(--text);

  font-size: 25px;
  font-weight: 950;
  line-height: 1.1;
}


.statistics-main-value-text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 18px;
}


.statistics-main-help{
  margin-top: 7px;

  color: var(--muted);

  font-size: 12px;
  line-height: 1.4;
}



/* =========================
   Gráficos
   ========================= */

.statistics-charts-grid{
  display: grid;
  grid-template-columns:
    minmax(0, 1.35fr)
    minmax(300px, 0.65fr);

  gap: 18px;
}


.statistics-chart-card{
  min-width: 0;
}


.statistics-section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}


.statistics-section-head h2{
  margin: 0;
}


.statistics-section-head p{
  margin: 6px 0 0;
}


.statistics-chart-wrap{
  position: relative;

  height: 320px;

  margin-top: 20px;
}


.statistics-chart-wrap-small{
  height: 230px;
}


.statistics-empty-chart{
  min-height: 260px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px;

  text-align: center;

  color: var(--muted);

  font-size: 14px;
}



/* =========================
   Leyenda stock
   ========================= */

.statistics-stock-legend{
  display: grid;
  gap: 10px;

  margin-top: 18px;
}


.statistics-stock-legend-item{
  display: grid;
  grid-template-columns:
    auto
    1fr
    auto;

  align-items: center;
  gap: 9px;

  color: var(--muted);
  font-size: 13px;
}


.statistics-stock-legend-item strong{
  color: var(--text);
}


.statistics-stock-dot{
  width: 10px;
  height: 10px;

  border-radius: 999px;
}


.statistics-stock-dot.is-low{
  background: rgba(239,68,68,0.9);
}


.statistics-stock-dot.is-medium{
  background: rgba(245,158,11,0.9);
}


.statistics-stock-dot.is-normal{
  background: rgba(46,196,182,0.9);
}



/* =========================
   Atención
   ========================= */

.statistics-attention-card{
  display: grid;
  gap: 18px;
}


.statistics-attention-count{
  flex: 0 0 auto;

  padding: 8px 12px;

  border-radius: 999px;

  background: rgba(0, 0, 0, 0.045);

  color: var(--muted);

  font-size: 12px;
  font-weight: 800;
}


.statistics-attention-count span{
  color: var(--text);
}


.statistics-attention-list{
  display: grid;
  gap: 10px;
}


.statistics-attention-row{
  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;
  gap: 13px;

  padding: 13px 14px;

  border: 1px solid var(--border);
  border-radius: 14px;
}


.statistics-attention-icon{
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  font-weight: 950;
}


.statistics-attention-icon.is-warning{
  background: rgba(245,158,11,0.12);
  color: rgb(180, 105, 0);
}


.statistics-attention-icon.is-neutral{
  background: rgba(0,0,0,0.05);
  color: var(--muted);
}


.statistics-attention-main{
  min-width: 0;

  display: grid;
  gap: 4px;
}


.statistics-attention-main strong{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--text);
}


.statistics-attention-main span{
  color: var(--muted);
  font-size: 13px;
}


.statistics-attention-meta{
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}


.statistics-attention-empty{
  display: flex;
  align-items: center;
  gap: 13px;

  padding: 18px;

  border: 1px dashed var(--border);
  border-radius: 14px;
}


.statistics-attention-empty-icon{
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: rgba(46,196,182,0.12);

  font-weight: 950;
}


.statistics-attention-empty p{
  margin: 4px 0 0;
}



/* =========================
   Resumen inferior
   ========================= */

.statistics-inventory-summary{
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;
}


.statistics-inventory-stat{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 14px 16px;

  border: 1px solid var(--border);
  border-radius: 14px;

  background: var(--surface);
}


.statistics-inventory-stat span{
  color: var(--muted);

  font-size: 13px;
  font-weight: 800;
}


.statistics-inventory-stat strong{
  color: var(--text);

  font-size: 18px;
  font-weight: 950;
}


.statistics-status-message{
  min-height: 20px;
}



/* =========================
   Responsive
   ========================= */

@media (max-width: 1050px){

  .statistics-main-grid{
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 800px){

  .statistics-charts-grid{
    grid-template-columns: 1fr;
  }


  .statistics-attention-row{
    grid-template-columns:
      auto
      minmax(0, 1fr);
  }


  .statistics-attention-meta{
    grid-column: 2;

    text-align: left;
  }


  .statistics-inventory-summary{
    grid-template-columns: 1fr;
  }

}


@media (max-width: 560px){

  .statistics-main-grid{
    grid-template-columns: 1fr;
  }


  .statistics-main-card{
    padding: 16px;
  }


  .statistics-chart-wrap{
    height: 280px;
  }


  .statistics-chart-wrap-small{
    height: 220px;
  }


  .statistics-section-head{
    display: grid;
  }


  .statistics-attention-count{
    width: fit-content;
  }

}

/* =========================================================
   RESPONSIVE GLOBAL SYNEXA
   v3.0.0
   Objetivo: simple + útil
   ========================================================= */

/* Evita desbordes horizontales accidentales */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

img,
video,
canvas{
  max-width:100%;
}

button,
input,
select,
textarea{
  min-width:0;
}

/* =========================================================
   TABLET / NAVEGACIÓN COMPACTA
   ========================================================= */

@media (max-width: 1100px){

  .inventory-navbar{
    gap:16px;
  }

  .inventory-nav-link{
    padding-inline:9px;
  }

  .inventory-nav-icon{
    display:none;
  }

  .statistics-main-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .statistics-charts-grid{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   MÓVIL Y TABLET PEQUEÑA
   ========================================================= */

@media (max-width: 900px){

  /* ---------- Header compartido ---------- */

  .inventory-header{
    position:relative;
    z-index:300;
    background:#fff;
    border-bottom:1px solid var(--border);
  }

  .inventory-header .container{
    position:relative;
  }

  .inventory-navbar{
    position:relative;
    min-height:68px;
    padding-block:10px;
    gap:12px;
  }

  .inventory-desktop-nav{
    display:none;
  }

  .inventory-brand{
    min-width:0;
    flex:1;
  }

  .inventory-brand-logo{
    height:36px;
  }

  .inventory-brand-text{
    min-width:0;
  }

  .inventory-brand-text > strong{
    font-size:14px;
  }

  .inventory-business-name{
    max-width:min(52vw, 220px);
    font-size:11px;
  }

  .inventory-navbar .burger{
    flex:0 0 auto;
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    color:var(--text);
    font-size:21px;
    font-weight:900;
  }

  .inventory-mobile-panel{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    z-index:400;

    display:none;
    gap:14px;

    max-height:min(72vh, 620px);
    overflow-y:auto;

    padding:14px;

    border:1px solid var(--border);
    border-radius:18px;

    background:#fff;

    box-shadow:
      0 22px 55px rgba(15,23,42,.16),
      0 4px 14px rgba(15,23,42,.06);
  }

  .inventory-mobile-panel.is-open{
    display:grid;
  }

  .inventory-mobile-group{
    gap:5px;
  }

  .inventory-mobile-label{
    padding:5px 8px 4px;
    font-size:10px;
  }

  .inventory-mobile-item{
    min-height:46px;
    padding:10px 11px;
    border:1px solid transparent;
  }

  .inventory-mobile-item.is-active{
    border-color:rgba(31,42,68,.08);
    background:#f1f5f9;
    color:var(--text);
  }

  .inventory-mobile-item.is-active > span{
    color:var(--text);
  }

  .inventory-mobile-logout{
    min-height:46px;
  }


  /* ---------- Layout general ---------- */

  .top-summary{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }

  .summary-grid{
    width:100%;
    min-width:0;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }

  .summary-box{
    min-width:0;
    padding:12px;
  }

  .summary-value{
    font-size:26px;
  }

  .filters-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .filters-grid > input:first-child{
    grid-column:1 / -1;
  }

  .checkbox-filter{
    min-height:44px;
  }

  .quick-scan-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
  }

  .quick-scan-row input{
    min-width:0;
  }


  /* ---------- Inventario ---------- */

  .toolbar-main{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }

  .toolbar-actions,
  .inventory-page-actions{
    width:100%;
  }

  .inventory-page-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .inventory-page-actions #btnOpenCreate{
    grid-column:1 / -1;
  }

  .inventory-page-actions > .btn,
  .inventory-page-more,
  .inventory-page-more-trigger{
    width:100%;
  }

  .inventory-page-actions-dropdown{
    width:min(320px, calc(100vw - 32px));
  }

  .product-card{
    padding:14px;
  }

  .product-card-content{
    display:grid;
    grid-template-columns:88px minmax(0, 1fr);
    gap:12px;
    align-items:start;
  }

  .product-thumb,
  .product-thumb-placeholder{
    width:88px;
    height:88px;
  }

  .product-card-top{
    min-width:0;
  }

  .product-actions,
  .product-actions-row{
    width:100%;
  }

  .product-actions-row{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .product-actions-row .btn,
  .product-actions .btn{
    justify-content:center;
  }


  /* ---------- Carrito ---------- */

  .cart-layout{
    grid-template-columns:1fr;
  }

  .cart-summary-card{
    position:static;
  }

  .cart-item{
    grid-template-columns:72px minmax(0, 1fr);
  }

  .cart-item-actions,
  .cart-item-total{
    grid-column:1 / -1;
  }

  .cart-item-total{
    text-align:left;
  }


  /* ---------- Pedidos ---------- */

  .orders-stats-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .orders-toolbar{
    grid-template-columns:1fr;
  }

  .orders-toolbar .btn{
    width:100%;
    justify-content:center;
  }

  .order-management-head{
    grid-template-columns:1fr;
  }

  .order-management-actions{
    width:100%;
    min-width:0;
    flex-direction:row;
    flex-wrap:wrap;
  }

  .order-management-actions .btn,
  .order-primary-action{
    flex:1;
    min-width:150px;
  }

  .order-detail-grid{
    grid-template-columns:1fr;
  }


  /* ---------- Ventas ---------- */

  .sales-stats-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .sales-stat-card:last-child{
    grid-column:1 / -1;
  }

  .sales-toolbar{
    grid-template-columns:1fr;
  }

  .sales-toolbar .btn{
    width:100%;
    justify-content:center;
  }

  .sales-card{
    grid-template-columns:1fr;
  }

  .sales-card-actions{
    width:100%;
    min-width:0;
  }

  .sales-card-actions .btn{
    width:100%;
  }

  .sales-issued-data{
    width:100%;
    text-align:left;
  }


  /* ---------- Estadísticas ---------- */

  .statistics-main-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .statistics-main-card{
    padding:14px;
  }

  .statistics-main-icon{
    width:36px;
    height:36px;
  }

  .statistics-main-value{
    font-size:22px;
  }

  .statistics-main-help{
    display:none;
  }

  .statistics-charts-grid{
    grid-template-columns:1fr;
  }

  .statistics-inventory-summary{
    grid-template-columns:1fr;
  }


  /* ---------- Configuración ---------- */

  .config-page-head{
    flex-direction:column;
  }

  .config-save-top{
    width:100%;
  }

  .config-save-top .btn{
    width:100%;
  }

  .config-bottom-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .config-bottom-actions .btn{
    width:100%;
  }

  .config-preview{
    max-width:none;
  }


  /* ---------- Catálogo ---------- */

  .catalog-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 640px){

  /* ---------- Espaciado y tipografía ---------- */

  .inventory-header .container,
  main .container{
    width:min(100% - 28px, 1180px);
  }

  .section{
    padding-block:24px;
  }

  h1{
    overflow-wrap:anywhere;
  }

  .lead{
    font-size:15px;
    line-height:1.55;
  }


  /* ---------- Header ---------- */

  .inventory-navbar{
    min-height:64px;
  }

  .inventory-brand-logo{
    height:34px;
  }

  .inventory-business-name{
    max-width:48vw;
  }

  .inventory-mobile-panel{
    left:0;
    right:0;
    width:100%;
    max-height:calc(100dvh - 92px);
    border-radius:16px;
  }


  /* ---------- Resumen inventario ---------- */

  .summary-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:8px;
  }

  .summary-box{
    padding:10px;
    border-radius:12px;
  }

  .summary-box .small{
    font-size:11px;
    line-height:1.25;
  }

  .summary-value{
    margin-top:6px;
    font-size:23px;
  }


  /* ---------- Filtros ---------- */

  .filters-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .filters-grid > input:first-child,
  .filters-grid .checkbox-filter{
    grid-column:1 / -1;
  }

  .quick-scan{
    padding:12px;
  }

  .quick-scan-head{
    display:grid;
    grid-template-columns:1fr;
  }

  .quick-scan-head > div:last-child,
  .quick-scan-head .btn{
    width:100%;
  }

  .quick-scan-row{
    grid-template-columns:1fr;
  }

  .quick-scan-row .btn{
    width:100%;
  }


  /* ---------- Acciones inventario ---------- */

  .inventory-page-actions{
    grid-template-columns:1fr 1fr;
  }

  .inventory-page-actions #btnOpenCreate{
    grid-column:1 / -1;
  }

  .inventory-page-more{
    position:relative;
  }

  .inventory-page-actions-dropdown{
    left:auto;
    right:0;
    width:min(300px, calc(100vw - 28px));
  }


  /* ---------- Tarjetas de producto ---------- */

  .product-card-content{
    grid-template-columns:76px minmax(0, 1fr);
  }

  .product-thumb,
  .product-thumb-placeholder{
    width:76px;
    height:76px;
    border-radius:12px;
  }

  .product-meta{
    font-size:13px;
  }

  .product-actions-row{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .product-actions-row .btn{
    padding:9px 10px;
    font-size:13px;
  }


  /* ---------- Modales ---------- */

  .synexa-modal{
    align-items:end;
    padding:0;
  }

  .synexa-modal-card{
    width:100%;
    max-width:none;
    max-height:92dvh;
    margin:0;
    border-radius:20px 20px 0 0;
    padding:18px;
  }

  .scanner-video-wrap{
    min-height:220px;
  }

  #scannerVideo{
    height:min(48vh, 360px);
  }


  /* ---------- Catálogo ---------- */

  .catalog-grid{
    grid-template-columns:1fr;
  }

  .catalog-product-img,
  .catalog-product-img-placeholder{
    height:220px;
  }


  /* ---------- Carrito ---------- */

  .cart-item{
    grid-template-columns:64px minmax(0, 1fr);
    gap:11px;
    padding:12px;
  }

  .cart-item-img,
  .cart-item-img-placeholder{
    width:64px;
    height:64px;
  }

  .cart-item-actions{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, auto));
    justify-content:start;
  }

  .coupon-row{
    flex-direction:column;
  }

  .coupon-row .btn{
    width:100%;
  }

  .delivery-method-card{
    grid-template-columns:30px minmax(0, 1fr);
  }

  .delivery-method-price{
    grid-column:2;
  }


  /* ---------- Pedidos ---------- */

  .orders-stats-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:9px;
  }

  .orders-stat-card{
    padding:12px;
    align-items:flex-start;
  }

  .orders-stat-icon{
    width:32px;
    height:32px;
    min-width:32px;
    font-size:12px;
  }

  .orders-stat-value{
    font-size:19px;
  }

  .orders-stat-help{
    display:none;
  }

  .orders-stage-wrapper,
  .sales-tabs-wrapper{
    margin-inline:-2px;
  }

  .orders-stage-tabs,
  .sales-tabs{
    padding:6px;
  }

  .order-management-head{
    padding:14px;
  }

  .order-customer-row{
    flex-direction:column;
    gap:7px;
  }

  .order-management-total{
    font-size:20px;
  }

  .order-management-actions{
    flex-direction:column;
  }

  .order-management-actions .btn,
  .order-primary-action{
    width:100%;
    min-width:0;
  }

  .order-management-detail{
    padding:12px;
  }

  .order-detail-data > div{
    flex-direction:column;
    gap:3px;
  }

  .order-detail-data strong{
    text-align:left;
  }

  .order-contact-actions{
    flex-direction:column;
  }

  .order-contact-actions .btn{
    width:100%;
    justify-content:center;
  }

  .order-product-line{
    align-items:flex-start;
  }


  /* ---------- Ventas ---------- */

  .sales-stats-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .sales-stat-card{
    padding:13px;
  }

  .sales-stat-card:last-child{
    grid-column:1 / -1;
  }

  .sales-stat-value{
    font-size:22px;
  }

  .sales-stat-help{
    display:none;
  }

  .sales-customer-row{
    flex-direction:column;
    gap:6px;
  }

  .sales-modal-actions{
    flex-direction:column-reverse;
  }

  .sales-modal-actions .btn{
    width:100%;
    justify-content:center;
  }


  /* ---------- Descuentos ---------- */

  .discount-selector-list{
    grid-template-columns:1fr;
  }

  .discount-card-actions{
    width:100%;
  }

  .discount-card-actions .btn{
    flex:1;
  }


  /* ---------- Estadísticas ---------- */

  .statistics-main-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:9px;
  }

  .statistics-main-card{
    min-height:118px;
    padding:12px;
    gap:10px;
  }

  .statistics-main-icon{
    width:32px;
    height:32px;
    border-radius:10px;
    font-size:13px;
  }

  .statistics-main-label{
    font-size:11px;
  }

  .statistics-main-value{
    font-size:20px;
  }

  .statistics-main-value-text{
    font-size:15px;
    white-space:normal;
  }

  .statistics-chart-wrap{
    height:260px;
  }

  .statistics-chart-wrap-small{
    height:210px;
  }

  .statistics-section-head{
    display:grid;
  }

  .statistics-attention-count{
    width:fit-content;
  }

  .statistics-attention-row{
    grid-template-columns:auto minmax(0, 1fr);
  }

  .statistics-attention-meta{
    grid-column:2;
    text-align:left;
  }


  /* ---------- Configuración ---------- */

  .config-toggle-row{
    align-items:center;
  }

  .config-delivery-option,
  .config-checkbox-card,
  .config-preview{
    padding:13px;
  }

}


/* =========================================================
   MÓVIL PEQUEÑO
   ========================================================= */

@media (max-width: 420px){

  .inventory-header .container,
  main .container{
    width:min(100% - 22px, 1180px);
  }

  .inventory-brand-logo{
    height:32px;
  }

  .inventory-brand-text > strong{
    font-size:13px;
  }

  .inventory-business-name{
    max-width:44vw;
  }

  .summary-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .summary-box{
    padding:9px 8px;
  }

  .summary-box .small{
    font-size:10px;
  }

  .summary-value{
    font-size:21px;
  }

  .inventory-page-actions{
    grid-template-columns:1fr;
  }

  .inventory-page-actions #btnOpenCreate{
    grid-column:auto;
  }

  .filters-grid{
    grid-template-columns:1fr;
  }

  .filters-grid > input:first-child,
  .filters-grid .checkbox-filter{
    grid-column:auto;
  }

  .product-card-content{
    grid-template-columns:64px minmax(0, 1fr);
  }

  .product-thumb,
  .product-thumb-placeholder{
    width:64px;
    height:64px;
  }

  .product-actions-row{
    grid-template-columns:1fr;
  }

  .orders-stats-grid,
  .statistics-main-grid{
    grid-template-columns:1fr 1fr;
  }

  .statistics-main-card{
    display:grid;
    min-height:108px;
  }

  .sales-stats-grid{
    grid-template-columns:1fr;
  }

  .sales-stat-card:last-child{
    grid-column:auto;
  }

  .cart-item-actions{
    grid-template-columns:1fr 1fr;
  }

}


/* =========================================================
   MODO MUY ANGOSTO
   ========================================================= */

@media (max-width: 340px){

  .summary-grid,
  .orders-stats-grid,
  .statistics-main-grid{
    grid-template-columns:1fr;
  }

  .inventory-brand-logo{
    height:30px;
  }

  .inventory-business-name{
    max-width:38vw;
  }

}


/* =========================================================
   PERSONALIZACIÓN VISUAL POR CLIENTE
   v3.1.0
   ========================================================= */


/* =========================
   Configuración de apariencia
   ========================= */

.theme-config-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px;
}


.theme-field{
  min-width:0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}


.theme-field input[type="color"]{
  width:100%;
  height:46px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}


.theme-preview-card{
  --theme-preview-primary:#2563eb;
  --theme-preview-secondary:#111827;
  --theme-preview-button:#2563eb;
  --theme-preview-background:#f8fafc;
  --theme-preview-text:#111827;

  margin-top:18px;
  padding:18px;

  border:1px solid
    color-mix(
      in srgb,
      var(--theme-preview-primary) 30%,
      #e5e7eb
    );

  border-radius:18px;
  background:var(--theme-preview-background);
  color:var(--theme-preview-text);
}


.theme-preview-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}


.theme-preview-top strong{
  color:var(--theme-preview-secondary);
  font-size:18px;
  font-weight:950;
}


.theme-preview-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  color:#fff;
  background:var(--theme-preview-primary);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
}


.theme-preview-card p{
  margin:12px 0 0;
  color:var(--theme-preview-text);
  opacity:.82;
  font-size:14px;
  line-height:1.55;
}


.theme-preview-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:16px;
}


.theme-preview-button{
  color:#fff;
  background:var(--theme-preview-button);
  border-color:var(--theme-preview-button);
}


.theme-preview-price{
  color:var(--theme-preview-secondary);
  font-size:22px;
  font-weight:950;
}


.theme-config-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}


@media (max-width: 1000px){

  .theme-config-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 560px){

  .theme-config-grid{
    grid-template-columns:1fr;
  }

  .theme-config-actions .btn{
    width:100%;
  }

}



/* =========================
   Variables públicas por negocio
   ========================= */

:root{
  --public-primary:#2563eb;
  --public-secondary:#111827;
  --public-button:#2563eb;
  --public-background:#f8fafc;
  --public-text:#111827;
  --public-surface:#ffffff;
  --public-border:#e5e7eb;
}


/* =========================
   Catálogo y carrito públicos
   ========================= */

.public-store-page{
  color:var(--public-text);
  background:
    radial-gradient(
      circle at 12% 10%,
      color-mix(
        in srgb,
        var(--public-primary) 10%,
        transparent
      ),
      transparent 22%
    ),
    var(--public-background);
}


.public-store-page .site-header{
  background:
    color-mix(
      in srgb,
      var(--public-background) 88%,
      #ffffff
    );

  border-bottom-color:
    color-mix(
      in srgb,
      var(--public-primary) 18%,
      var(--public-border)
    );
}


.public-store-page .brand strong,
.public-store-page h1,
.public-store-page h2,
.public-store-page h3,
.public-store-page .catalog-product-title,
.public-store-page .cart-item-title{
  color:var(--public-secondary);
}


.public-store-page .lead,
.public-store-page .small,
.public-store-page .catalog-product-stock,
.public-store-page .cart-item-meta{
  color:
    color-mix(
      in srgb,
      var(--public-text) 72%,
      #ffffff
    );
}


.public-store-page .card,
.public-store-page .catalog-product-card,
.public-store-page .cart-item,
.public-store-page .cart-summary-card,
.public-store-page .checkout-section-card{
  border-color:
    color-mix(
      in srgb,
      var(--public-primary) 16%,
      var(--public-border)
    );

  background:var(--public-surface);
}


.public-store-page .badge,
.public-store-page .kicker{
  color:var(--public-primary);
}


.public-store-page .btn-primary{
  color:#fff;
  background:var(--public-button);
  border-color:var(--public-button);
}


.public-store-page .btn-primary:hover{
  filter:brightness(.96);
}


.public-store-page .btn-secondary{
  color:var(--public-secondary);
  border-color:
    color-mix(
      in srgb,
      var(--public-primary) 22%,
      var(--public-border)
    );
}


.public-store-page .catalog-product-price,
.public-store-page .cart-summary-total strong,
.public-store-page .cart-item-total{
  color:var(--public-secondary);
}


.public-store-page .catalog-product-card{
  box-shadow:
    0 14px 34px
    color-mix(
      in srgb,
      var(--public-secondary) 10%,
      transparent
    );
}


.public-store-page .catalog-product-card:hover{
  border-color:
    color-mix(
      in srgb,
      var(--public-primary) 42%,
      var(--public-border)
    );
}


.public-store-page .delivery-method-card.is-selected{
  border-color:
    color-mix(
      in srgb,
      var(--public-primary) 45%,
      var(--public-border)
    );

  background:
    color-mix(
      in srgb,
      var(--public-primary) 8%,
      #ffffff
    );

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--public-primary) 10%,
      transparent
    );
}


.public-store-page .delivery-method-card.is-selected
.delivery-method-radio{
  color:var(--public-primary);

  border-color:
    color-mix(
      in srgb,
      var(--public-primary) 45%,
      var(--public-border)
    );

  background:
    color-mix(
      in srgb,
      var(--public-primary) 10%,
      #ffffff
    );
}


.public-store-page .coupon-applied-box,
.public-store-page .free-shipping-notice,
.public-store-page .pickup-info-box{
  border-color:
    color-mix(
      in srgb,
      var(--public-primary) 35%,
      var(--public-border)
    );

  background:
    color-mix(
      in srgb,
      var(--public-primary) 8%,
      #ffffff
    );
}


.public-store-page .coupon-applied-box strong,
.public-store-page .coupon-applied-box .small,
.public-store-page .free-shipping-notice,
.public-store-page .pickup-info-box strong,
.public-store-page .pickup-address-text{
  color:var(--public-primary);
}