@layer nexo-product-form {
 #modalAgregar.modal-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: var(--nexo-space-4) !important;
 }

 #modalAgregar.modal-overlay[style*="block"],
 #modalAgregar.modal-overlay[style*="flex"] {
  display: flex !important;
 }

 #modalAgregar .modal-producto {
  width: min(1040px, 94vw) !important;
  max-width: min(1040px, 94vw) !important;
  max-height: min(88vh, 820px) !important;
  overflow: auto !important;
  border-radius: var(--nexo-radius-xl) !important;
  background: var(--nexo-surface) !important;
  border: 1px solid var(--nexo-line) !important;
  color: var(--nexo-text) !important;
  box-shadow: var(--nexo-shadow-soft) !important;
  backdrop-filter: var(--nexo-glass-blur) !important;
 }

 #modalAgregar .modal-header {
  display: grid !important;
  grid-template-columns: 1fr auto auto !important;
  gap: var(--nexo-space-3) !important;
  align-items: center !important;
  padding-bottom: var(--nexo-space-4) !important;
  margin-bottom: var(--nexo-space-4) !important;
  border-bottom: 1px solid var(--nexo-line) !important;
 }

 #modalAgregar .modal-header h2 {
  margin: 0 !important;
  color: var(--nexo-text) !important;
  font-size: 30px !important;
  line-height: 1.05 !important;
 }

 #modalAgregar .modal-header button {
  min-height: var(--nexo-control-height) !important;
  border-radius: var(--nexo-radius-md) !important;
 }

 #modalAgregar .tipo-producto-selector,
 #modalAgregar .producto-tipo-ayuda,
 #modalAgregar .producto-tabs,
 #modalAgregar .formulario-producto.ficha-producto,
 #modalAgregar .modal-botones {
  width: 100% !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
 }

 #modalAgregar .tipo-producto-selector {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--nexo-space-3) !important;
  margin-bottom: var(--nexo-space-3) !important;
 }

 #modalAgregar .tipo-producto-card {
  min-height: 68px !important;
  max-width: 230px !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: var(--nexo-space-3) !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: var(--nexo-surface-strong) !important;
  color: var(--nexo-text) !important;
  border: 1px solid var(--nexo-line) !important;
  box-shadow: var(--nexo-shadow-card) !important;
 }

 #modalAgregar .tipo-producto-card.activo {
  border-color: color-mix(in srgb, var(--nexo-brand) 56%, var(--nexo-line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--nexo-brand) 15%, var(--nexo-surface-strong)), var(--nexo-surface-strong)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--nexo-brand) 12%, transparent), var(--nexo-shadow-card) !important;
 }

 #modalAgregar .tipo-producto-icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--nexo-brand) 10%, var(--nexo-surface-soft)) !important;
  color: var(--nexo-brand) !important;
 }

 #modalAgregar .tipo-producto-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
 }

 #modalAgregar .tipo-producto-copy strong {
  color: var(--nexo-text) !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
 }

 #modalAgregar .tipo-producto-copy small,
 #modalAgregar .tipo-producto-card span {
  overflow: hidden !important;
  color: var(--nexo-text-muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
 }

 #modalAgregar .producto-tipo-ayuda {
  margin-bottom: var(--nexo-space-3) !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: var(--nexo-surface-soft) !important;
  border: 1px solid var(--nexo-line) !important;
  color: var(--nexo-text) !important;
 }

 #modalAgregar .proveedor-catalogo-seccion,
 #modalAgregar .modo-captura-seccion {
  width: 100% !important;
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: var(--nexo-space-3) !important;
 }

 #modalAgregar .proveedor-catalogo-seccion {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: var(--nexo-space-3) !important;
  align-items: stretch !important;
 }

 #modalAgregar .proveedor-catalogo-selector-inline,
 #modalAgregar .proveedor-catalogo-info,
 #modalAgregar .modo-captura-seccion {
  padding: 12px 14px !important;
  border-radius: 18px !important;
  background: var(--nexo-surface-soft) !important;
  border: 1px solid var(--nexo-line) !important;
  color: var(--nexo-text) !important;
 }

 #modalAgregar .proveedor-catalogo-selector-inline > strong,
 #modalAgregar .proveedor-catalogo-info > strong,
 #modalAgregar .modo-captura-seccion > strong {
  display: block !important;
  font-size: 13px !important;
  margin-bottom: 4px !important;
 }

 #modalAgregar .proveedor-catalogo-ayuda {
  display: block !important;
  color: var(--nexo-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-bottom: var(--nexo-space-2) !important;
 }

 #modalAgregar .proveedor-catalogo-selector-tiles {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
 }

 #modalAgregar .proveedor-catalogo-selector-tiles button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border-radius: 13px !important;
  background: var(--nexo-surface-strong) !important;
  color: var(--nexo-text) !important;
  border: 1px solid var(--nexo-line) !important;
  font-size: 12px !important;
 }

 #modalAgregar .proveedor-catalogo-selector-tiles button.activo {
  border-color: color-mix(in srgb, var(--nexo-brand) 56%, var(--nexo-line)) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--nexo-brand) 15%, var(--nexo-surface-strong)), var(--nexo-surface-strong)) !important;
 }

 #modalAgregar .proveedor-catalogo-tile-icono {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--nexo-brand) 12%, var(--nexo-surface-soft)) !important;
  color: var(--nexo-brand) !important;
  font-weight: 900 !important;
  font-size: 11px !important;
 }

 #modalAgregar .proveedor-catalogo-info {
  display: grid !important;
  gap: 4px !important;
  align-content: start !important;
 }

 #modalAgregar .proveedor-catalogo-info-nombre {
  font-weight: 900 !important;
  font-size: 13px !important;
 }

 #modalAgregar .proveedor-catalogo-info-regla {
  color: var(--nexo-text-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
 }

 #modalAgregar .proveedor-catalogo-info small {
  color: var(--nexo-text-muted) !important;
  font-size: 10px !important;
 }

 #modalAgregar .margen-manual-proveedor {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
  padding-top: 8px !important;
  border-top: 1px dashed var(--nexo-line) !important;
  color: var(--nexo-text-muted) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
 }

 #modalAgregar .margen-manual-proveedor input {
  width: 64px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
  background: var(--nexo-surface-strong) !important;
  color: var(--nexo-text) !important;
  border: 1px solid var(--nexo-line) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
 }

 #modalAgregar .modo-captura-botones {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
 }

 #modalAgregar .modo-captura-botones button {
  min-height: 38px !important;
  border-radius: 13px !important;
  background: var(--nexo-surface-strong) !important;
  color: var(--nexo-text-muted) !important;
  border: 1px solid var(--nexo-line) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
 }

 #modalAgregar .modo-captura-botones button.activo {
  background: linear-gradient(135deg, var(--nexo-brand), var(--nexo-brand-strong)) !important;
  color: #fff !important;
  border-color: transparent !important;
 }

 #modalAgregar .campo-ficha {
  position: relative !important;
 }

 #modalAgregar .campo-ficha span.campo-ficha-badge-auto {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, #22c55e 18%, transparent) !important;
  color: #16a34a !important;
  font-size: 10px !important;
  font-weight: 900 !important;
 }

 #modalAgregar .campo-ficha span.campo-ficha-badge-imagen {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--nexo-brand) 18%, transparent) !important;
  color: var(--nexo-brand) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
 }

 @media (max-width: 900px) {
  #modalAgregar .proveedor-catalogo-seccion {
   grid-template-columns: 1fr !important;
  }

  #modalAgregar .proveedor-catalogo-selector-tiles,
  #modalAgregar .modo-captura-botones {
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
 }

 #modalAgregar .producto-tabs {
  display: flex !important;
  gap: var(--nexo-space-2) !important;
  padding: var(--nexo-space-2) !important;
  margin-bottom: var(--nexo-space-3) !important;
  border-radius: 18px !important;
  background: var(--nexo-surface-soft) !important;
  border: 1px solid var(--nexo-line) !important;
 }

 #modalAgregar .producto-tabs button {
  min-height: 38px !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: var(--nexo-text-muted) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
 }

 #modalAgregar .producto-tabs button.activo {
  background: linear-gradient(135deg, var(--nexo-brand), var(--nexo-brand-strong)) !important;
  color: #fff !important;
  box-shadow: var(--nexo-shadow-brand) !important;
 }

 #modalAgregar .formulario-producto.ficha-producto {
  display: block !important;
  margin-top: 0 !important;
 }

 #modalAgregar .producto-tab-panel {
  display: none !important;
  grid-template-columns: repeat(2, minmax(260px, 420px)) !important;
  justify-content: center !important;
  gap: var(--nexo-space-3) !important;
  align-items: end !important;
 }

 #modalAgregar .producto-tab-panel.activo {
  display: grid !important;
 }

 #modalAgregar .campo-ficha {
  max-width: 420px !important;
  display: grid !important;
  gap: 6px !important;
  grid-column: auto !important;
 }

 #modalAgregar .campo-ficha:has(#nuevaDescripcion),
 #modalAgregar .campo-ficha:has(#codigosRelacionados) {
  max-width: 852px !important;
  grid-column: span 2 !important;
 }

 #modalAgregar .campo-ficha span {
  color: var(--nexo-text-muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
 }

 #modalAgregar .campo-ficha .pieza-stock-info {
  color: var(--nexo-text-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-top: 2px !important;
 }

 #modalAgregar .campo-ficha:has(#permiteVentaPieza) {
  flex-direction: row !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
 }

 #modalAgregar .campo-ficha:has(#permiteVentaPieza) input {
  width: auto !important;
  min-height: auto !important;
 }

 #modalAgregar .campo-ficha input,
 #modalAgregar .campo-ficha select {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 15px !important;
  background: var(--nexo-surface-soft) !important;
  color: var(--nexo-text) !important;
  border: 1px solid var(--nexo-line) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
 }

 #modalAgregar .campo-ficha input[type="file"] {
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
 }

 #modalAgregar .btn-sugerencia-precio-proveedor {
  width: 100% !important;
  min-height: 36px !important;
  margin-top: 2px !important;
  padding: 0 12px !important;
  border-radius: 12px !important;
  border: 1px dashed var(--brand-color, #0d6efd) !important;
  background: color-mix(in srgb, var(--brand-color, #0d6efd) 10%, transparent) !important;
  color: var(--brand-color, #0d6efd) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  align-items: center !important;
  justify-content: center !important;
 }

 #modalAgregar .modal-botones {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--nexo-space-3) !important;
  margin-top: var(--nexo-space-4) !important;
 }

 #modalAgregar .modal-botones button {
  min-height: 46px !important;
  border-radius: 15px !important;
 }

 #modalAgregar .modal-botones button:nth-child(2) {
  background: var(--nexo-surface-strong) !important;
  color: var(--nexo-text) !important;
  border: 1px solid var(--nexo-line) !important;
 }

 @media (max-width: 900px) {
  #modalAgregar .tipo-producto-selector {
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
 }

 @media (max-width: 680px) {
  #modalAgregar .modal-header,
  #modalAgregar .tipo-producto-selector,
  #modalAgregar .producto-tab-panel,
  #modalAgregar .modal-botones {
   grid-template-columns: 1fr !important;
  }

  #modalAgregar .campo-ficha,
  #modalAgregar .campo-ficha:has(#nuevaDescripcion),
  #modalAgregar .campo-ficha:has(#codigosRelacionados) {
   max-width: none !important;
   grid-column: auto !important;
  }
 }
}