/* ====================================================================
   P42 - Producto publico / producto.php
   --------------------------------------------------------------------
   Limpieza visual y responsive de la pagina dedicada del producto.
   Mantiene la logica en PHP/JS y mueve estilos repetidos al design system
   de la plataforma publica.
   ==================================================================== */

.ims-product-page {
  max-width: 1200px;
}

.ims-product-breadcrumb {
  font-size: var(--ims-text-sm);
  margin-bottom: var(--ims-space-4);
}
.ims-product-breadcrumb a {
  text-decoration: none;
}
.ims-product-breadcrumb__sep {
  margin: 0 var(--ims-space-2);
}

.ims-product-headline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ims-space-3);
  margin-bottom: var(--ims-space-2);
  flex-wrap: wrap;
}
.ims-product-headline__meta,
.ims-product-category-link,
.ims-product-admin-callout__inner,
.ims-product-admin-header,
.ims-product-admin-title,
.ims-product-admin-actions,
.ims-product-related-header,
.ims-product-price-row {
  display: flex;
  align-items: center;
  gap: var(--ims-space-2);
  flex-wrap: wrap;
}
.ims-product-headline__meta {
  font-size: var(--ims-text-sm);
}
.ims-product-category-link {
  gap: var(--ims-space-1);
}
.ims-product-category-link a {
  text-decoration: none;
}
.ims-product-category-link i {
  color: var(--ims-text-mute);
}
.ims-product-id-chip {
  font-size: var(--ims-text-xs);
}
.ims-product-title {
  margin: 0 0 var(--ims-space-3);
}
.ims-product-lead,
.ims-product-description-text {
  color: var(--ims-text-soft);
  white-space: pre-wrap;
}
.ims-product-lead {
  margin-bottom: var(--ims-space-4);
}
.ims-product-price-block {
  margin-bottom: var(--ims-space-5);
}
.ims-product-price-row {
  align-items: baseline;
}
.ims-product-price-main {
  margin: 0;
  color: var(--ims-text);
}
.ims-product-currency {
  font-size: var(--ims-text-md);
}
.ims-product-availability {
  margin-top: var(--ims-space-2);
  font-weight: var(--ims-weight-medium);
}
.ims-product-cta {
  margin-bottom: var(--ims-space-4);
}
.ims-product-admin-callout {
  margin-bottom: var(--ims-space-5);
  padding: var(--ims-space-3);
  background: var(--ims-brand-50);
  border: 1px solid var(--ims-brand-200);
  border-radius: var(--ims-radius-md);
}
.ims-product-admin-callout__inner {
  color: var(--ims-brand-700);
  font-size: var(--ims-text-xs);
}
.ims-product-admin-callout a {
  color: var(--ims-brand-700);
  font-weight: var(--ims-weight-semibold);
}

.ims-product-section {
  margin-top: var(--ims-space-10);
  padding-top: var(--ims-space-6);
  border-top: 1px solid var(--ims-border);
}
.ims-product-section-title {
  margin-bottom: var(--ims-space-3);
}

.ims-product-related-header {
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--ims-space-4);
}
.ims-product-related-header .ims-h3 {
  margin: 0;
}
.ims-product-related-card {
  display: flex;
  text-decoration: none;
  color: inherit;
}

.ims-product-admin-zone {
  margin-top: var(--ims-space-8);
  padding-top: var(--ims-space-6);
}
.ims-product-admin-header {
  justify-content: space-between;
  margin-bottom: var(--ims-space-4);
}
.ims-product-admin-title .ims-h3 {
  margin: 0;
}
.ims-product-admin-actions {
  gap: var(--ims-space-2);
}
.ims-product-skeleton-lg {
  height: 80px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto var(--ims-space-3);
}
.ims-product-skeleton-md {
  height: 40px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
.ims-product-skeleton-table {
  height: 200px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.ims-product-admin-note {
  font-size: .75rem;
  margin-left: 4px;
}
.ims-product-barcode-wrap {
  margin-top: var(--ims-space-4);
}
.ims-product-barcode-body {
  text-align: center;
  padding: var(--ims-space-4);
}
.ims-product-mov-empty {
  padding: var(--ims-space-6);
}
.ims-product-mov-table-body {
  padding: 0;
}
.ims-product-mov-table {
  font-size: var(--ims-text-sm);
}
.ims-product-mov-table th {
  padding: var(--ims-space-3);
  border-bottom: 1px solid var(--ims-border);
}
.ims-product-mov-table th:nth-child(3),
.ims-product-mov-table th:nth-child(4) {
  text-align: right;
}
.ims-product-mov-count {
  margin-top: var(--ims-space-2);
  font-size: var(--ims-text-xs);
}

@media (max-width: 767px) {
  .ims-product-admin-header,
  .ims-product-related-header {
    align-items: stretch;
  }
  .ims-product-admin-actions,
  .ims-product-related-header .ims-btn {
    width: 100%;
  }
  .ims-product-admin-actions .ims-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Enlace a vitrina de tienda desde la ficha de producto */
.ims-product-store-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: fit-content;
  max-width: 100%;
  margin: calc(var(--ims-space-2) * -1) 0 var(--ims-space-3);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--ims-brand-50, #ecfdf5);
  color: var(--ims-brand-700, #047857);
  text-decoration: none;
  font-size: var(--ims-text-sm, .875rem);
  font-weight: 600;
}
.ims-product-store-link i { color: currentColor; }
.ims-product-store-link span {
  color: var(--ims-text-mute, #64748b);
  font-weight: 500;
}
.ims-product-store-link:hover {
  background: var(--ims-brand-100, #d1fae5);
  color: var(--ims-brand-800, #065f46);
}

/* v44.6 — equivalente USD/CUP informativo en ficha pública */
.ims-product-price-row .ims-product-price-equivalent {
  font-size: var(--ims-text-sm);
  color: var(--ims-text-mute);
  margin-left: var(--ims-space-2);
}

/* FIX — Productos relacionados en una sola fila horizontal
   Mantiene el mismo render de tarjeta publica, pero evita que la seccion
   forme dos filas cuando hay muchos relacionados. */
.ims-product-related-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 178px);
  grid-template-columns: none !important;
  gap: var(--ims-space-3, .75rem);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 var(--ims-space-2, .5rem);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.ims-product-related-grid > * {
  min-width: 0;
  scroll-snap-align: start;
}
.ims-product-related-grid .ims-card-plat {
  height: 100%;
}
@media (min-width: 768px) {
  .ims-product-related-grid {
    grid-auto-columns: minmax(170px, 205px);
  }
}
@media (min-width: 1200px) {
  .ims-product-related-grid {
    grid-auto-columns: minmax(185px, 220px);
  }
}


/* Parche 16.5: zona operativa completa del producto */
.ims-product-op-alerts {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
  margin-bottom: var(--ims-space-4);
}
@media (min-width: 768px) {
  .ims-product-op-alerts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ims-product-op-alert {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .65rem .8rem;
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-md);
  background: var(--ims-bg-subtle);
  font-size: var(--ims-text-sm);
  line-height: 1.35;
}
.ims-product-op-alert i { margin-top: .1rem; }
.ims-product-op-alert--danger { border-color: rgba(220, 38, 38, .28); background: rgba(254, 242, 242, .85); color: #991b1b; }
.ims-product-op-alert--warning { border-color: rgba(217, 119, 6, .28); background: rgba(255, 251, 235, .9); color: #92400e; }
.ims-product-op-alert--info { border-color: rgba(37, 99, 235, .24); background: rgba(239, 246, 255, .9); color: #1d4ed8; }
.ims-product-op-alert--secondary { color: var(--ims-text-mute); }
.ims-product-inventory-kpis .ims-admin-kpi-value {
  font-size: 1.05rem;
}
.ims-product-op-card .ims-admin-row {
  gap: .75rem;
}
.ims-product-op-card .ims-admin-row > span:first-child {
  min-width: 9rem;
}
.ims-product-op-card .ims-admin-row > span:last-child {
  overflow-wrap: anywhere;
}
.ims-product-provider-actions {
  padding-top: .65rem;
}
.ims-product-orders-table {
  font-size: var(--ims-text-sm);
}
.ims-product-orders-table th,
.ims-product-orders-table td {
  vertical-align: middle;
  padding: .55rem .65rem;
}
.ims-product-orders-table th:nth-child(3),
.ims-product-orders-table th:nth-child(4),
.ims-product-orders-table th:nth-child(5) {
  text-align: right;
}
.ims-product-orders-empty {
  font-size: var(--ims-text-sm);
}
.ims-product-mov-table th:nth-child(5),
.ims-product-mov-table th:nth-child(6) {
  text-align: left;
}