/* v161 - Nuevo producto desde ticket igualado al modal de Catálogo */

/* El POS traía el backdrop desplazado hacia arriba con top:-90px; eso deformaba el modal.
   Se normaliza para que abra como el modal de Catálogo. */
.pos-modal-backdrop,
.pos-modal-backdrop[class],
.pos-modal-backdrop[style]{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  padding:20px 24px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow:auto!important;
  box-sizing:border-box!important;
}

/* Panel principal igual al formulario de catálogo */
.pos-modal-backdrop .new-product-panel{
  width:min(1120px, calc(100vw - 48px))!important;
  max-width:1120px!important;
  max-height:calc(100vh - 40px)!important;
  max-height:calc(100dvh - 40px)!important;
  padding:0!important;
  margin:0 auto!important;
  border-radius:22px!important;
  background:#fff!important;
  border:1px solid #dfe7f3!important;
  box-shadow:0 26px 75px rgba(15,23,42,.25)!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  box-sizing:border-box!important;
}

/* Encabezado del modal */
.pos-modal-backdrop .new-product-panel > .flex.justify-between,
.pos-modal-backdrop .new-product-panel > div:first-child{
  flex:0 0 auto!important;
  padding:18px 22px!important;
  border-bottom:1px solid #edf2f7!important;
  background:#fff!important;
  margin:0!important;
}
.pos-modal-backdrop .new-product-panel h3{
  margin:0!important;
  color:#0f1f44!important;
  font-size:21px!important;
  line-height:1.15!important;
  letter-spacing:-.03em!important;
  font-weight:950!important;
}
.pos-modal-backdrop .new-product-panel .btn-secondary,
.pos-modal-backdrop .new-product-panel > .flex.justify-between button{
  min-height:40px!important;
  border-radius:12px!important;
  padding:0 14px!important;
  border:1px solid #d8e2f0!important;
  background:#fff!important;
  color:#102044!important;
  font-weight:850!important;
}

/* Cuerpo del formulario: 3 columnas como Catálogo */
.pos-modal-backdrop .new-product-grid{
  flex:1 1 auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  padding:18px 22px 16px!important;
  margin:0!important;
  overflow:auto!important;
  max-height:none!important;
  align-items:start!important;
  box-sizing:border-box!important;
}

/* Campos */
.pos-modal-backdrop .new-product-grid label,
.pos-modal-backdrop .new-product-grid .cost-field{
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  min-width:0!important;
  margin:0!important;
  color:#3b5585!important;
  font-weight:900!important;
}
.pos-modal-backdrop .new-product-grid label > span,
.pos-modal-backdrop .new-product-grid .cost-field > span{
  display:block!important;
  margin:0!important;
  color:#6b7a95!important;
  font-size:12px!important;
  line-height:1.15!important;
  font-weight:850!important;
}
.pos-modal-backdrop .new-product-grid .input,
.pos-modal-backdrop .new-product-grid input,
.pos-modal-backdrop .new-product-grid select,
.pos-modal-backdrop .new-product-grid textarea{
  width:100%!important;
  min-width:0!important;
  min-height:42px!important;
  border-radius:12px!important;
  border:1px solid #d9e3f1!important;
  background:#fff!important;
  color:#102044!important;
  padding:10px 12px!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}
.pos-modal-backdrop .new-product-grid textarea{
  min-height:76px!important;
  resize:vertical!important;
}

/* Acomodar como el formulario de Catálogo aunque desde ticket no exista campo Sucursal:
   Stock mínimo queda a la derecha, Stock máximo y Unidad bajan a la siguiente fila. */
.pos-modal-backdrop .new-product-grid > label:nth-of-type(8){
  grid-column:3!important;
}
.pos-modal-backdrop .new-product-grid > label:nth-of-type(9){
  grid-column:1!important;
}
.pos-modal-backdrop .new-product-grid > label:nth-of-type(10){
  grid-column:2!important;
}

/* SAT + IVA como Catálogo */
.pos-modal-backdrop .new-product-grid .sat-mini-card{
  grid-column:1 / span 2!important;
  border-radius:16px!important;
  border:1px solid #dbe6f5!important;
  background:#f8fbff!important;
  padding:13px 14px!important;
  align-self:stretch!important;
  box-sizing:border-box!important;
}
.pos-modal-backdrop .new-product-grid .sat-mini-card > .flex{
  align-items:center!important;
}
.pos-modal-backdrop .new-product-grid .sat-mini-card b{
  color:#17233f!important;
}
.pos-modal-backdrop .new-product-grid .sat-mini-grid{
  display:grid!important;
  grid-template-columns:1fr 1.7fr 1fr 1fr!important;
  gap:8px!important;
  margin-top:11px!important;
}
.pos-modal-backdrop .new-product-grid .sat-mini-grid span{
  min-height:50px!important;
  border-radius:12px!important;
  border:1px solid #dbe6f5!important;
  background:#fff!important;
  padding:8px 10px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}
.pos-modal-backdrop .new-product-grid .sat-mini-grid small{
  color:#8a97ad!important;
  text-transform:uppercase!important;
  font-size:9px!important;
  line-height:1.1!important;
  font-weight:900!important;
}
.pos-modal-backdrop .new-product-grid .sat-mini-grid b{
  color:#17233f!important;
  font-size:12px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Descripción / íconos en ancho completo */
.pos-modal-backdrop .new-product-grid .wide{
  grid-column:1 / -1!important;
}

/* Corregir botón de categoría para que quede dentro del input */
.pos-modal-backdrop .pdv131-category-wrap{
  position:relative!important;
}
.pos-modal-backdrop .pdv131-category-trigger{
  top:auto!important;
  bottom:1px!important;
  right:1px!important;
  width:44px!important;
  height:40px!important;
  border-radius:0 12px 12px 0!important;
  background:#f8fbff!important;
  border:0!important;
  border-left:1px solid #e3ebf6!important;
  color:#0b2557!important;
}

/* Footer igualado al catálogo */
.pos-modal-backdrop .new-product-footer{
  flex:0 0 auto!important;
  position:sticky!important;
  bottom:0!important;
  margin:0!important;
  padding:14px 22px!important;
  border-top:1px solid #edf2f7!important;
  background:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  z-index:8!important;
  box-sizing:border-box!important;
}
.pos-modal-backdrop .new-product-footer .footer-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  margin-left:auto!important;
}
.pos-modal-backdrop .new-product-footer .btn-primary,
.pos-modal-backdrop .new-product-footer .btn-secondary{
  min-height:42px!important;
  border-radius:12px!important;
  padding:0 16px!important;
  font-weight:900!important;
}
.pos-modal-backdrop .product-margin-footer-terminal,
.pos-modal-backdrop .footer-margin-pill{
  min-height:auto!important;
  padding:9px 12px!important;
  border-radius:13px!important;
  background:#f8fafc!important;
  border:1px solid #e4ebf5!important;
  box-shadow:none!important;
}

/* Responsive */
@media(max-width:980px){
  .pos-modal-backdrop .new-product-grid{
    grid-template-columns:1fr 1fr!important;
  }
  .pos-modal-backdrop .new-product-grid .sat-mini-card{
    grid-column:1 / -1!important;
  }
  .pos-modal-backdrop .new-product-grid > label:nth-of-type(8),
  .pos-modal-backdrop .new-product-grid > label:nth-of-type(9),
  .pos-modal-backdrop .new-product-grid > label:nth-of-type(10){
    grid-column:auto!important;
  }
}
@media(max-width:680px){
  .pos-modal-backdrop{
    padding:10px!important;
  }
  .pos-modal-backdrop .new-product-panel{
    width:calc(100vw - 20px)!important;
    max-height:calc(100vh - 20px)!important;
    max-height:calc(100dvh - 20px)!important;
  }
  .pos-modal-backdrop .new-product-grid{
    grid-template-columns:1fr!important;
  }
  .pos-modal-backdrop .new-product-grid .sat-mini-grid{
    grid-template-columns:1fr!important;
  }
  .pos-modal-backdrop .new-product-footer{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .pos-modal-backdrop .new-product-footer .footer-actions{
    width:100%!important;
  }
  .pos-modal-backdrop .new-product-footer .footer-actions button{
    flex:1 1 0!important;
  }
}