/* ====================================================================
   IMS - Design System v1
   ====================================================================
   Sistema de diseno base. Define tokens (colores, espaciado, tipografia,
   sombras, bordes, transiciones) usados por toda la interfaz.

   Filosofia:
   - Blanco predomina (90% del UI)
   - Verde de marca solo para acciones primarias y elementos de marca
   - Otros colores estrictamente funcionales (rojo=error, amarillo=warn, azul=info)

   Marca: Infinity Market - Verde principal #0f6e3c

   ====================================================================
   GUIA DE MANTENIMIENTO
   ====================================================================
   ESTRUCTURA del archivo (en orden):
     1. Tokens (CSS custom properties en :root)
     2. Reset / base de tipografia
     3. Componentes ims-*  (cards, badges, botones, modales, etc.)
     4. Utilidades / helpers
     5. Animaciones / responsive

   QUE archivos cargan este CSS:
     - includes/header.php  (catalogo publico, despues de styles.css)
     - includes/header_admin.php  (admin internal, opcional)

   COMO AGREGAR un componente nuevo:
     1. Define la clase con prefijo .ims-* (ej: .ims-mi-componente)
     2. Usa los tokens (--ims-*) en lugar de valores hardcoded
     3. Agrega un comentario de seccion con el patron === del archivo
     4. Documenta donde se usa el componente (que archivo PHP/JS)

   PALETA DE COLOR (regla de oro, no romper):
     - Verde marca = "hacer algo" (CTAs, links importantes, success)
     - Rojo = "atencion / error"
     - Amarillo / ambar = "advertencia, atencion suave"
     - Azul = "informacion neutral"
     - Negro/gris = informacion textual normal
     - Blanco = base

   Ultima limpieza: v60
   ==================================================================== */

:root {
  /* === Verde de marca (escala derivada de #0f6e3c) === */
  --ims-brand-50:  #f0faf3;   /* fondos sutiles, hover de items menu */
  --ims-brand-100: #dcf3e2;   /* badges suaves, fondos de aviso ok */
  --ims-brand-200: #b7e4c2;   /* bordes de elementos verdes */
  --ims-brand-300: #88cf9b;
  --ims-brand-400: #4eaf6b;
  --ims-brand-500: #2a9252;   /* hover ligero del primario */
  --ims-brand-600: #0f6e3c;   /* PRIMARIO de marca */
  --ims-brand-700: #0c5a31;   /* hover/active del primario */
  --ims-brand-800: #0a4827;
  --ims-brand-900: #073a1f;

  /* ─── Grises (la base del UI) ─────────────────────────────────────── */
  --ims-gray-0:    #ffffff;
  --ims-gray-50:   #fafafa;   /* fondos de pagina, secciones sutiles */
  --ims-gray-100:  #f4f4f5;   /* hovers, fondos de inputs */
  --ims-gray-200:  #e4e4e7;   /* bordes sutiles */
  --ims-gray-300:  #d4d4d8;   /* bordes normales, dividers */
  --ims-gray-400:  #a1a1aa;   /* texto disabled, placeholders */
  --ims-gray-500:  #71717a;   /* texto secundario */
  --ims-gray-600:  #52525b;   /* texto importante secundario */
  --ims-gray-700:  #3f3f46;   /* texto principal (en lugar de negro puro) */
  --ims-gray-800:  #27272a;
  --ims-gray-900:  #18181b;   /* titulos, texto enfatico */

  /* ─── Funcionales ─────────────────────────────────────────────────── */
  /* Rojo (error, agotado, eliminar) */
  --ims-red-50:    #fef2f2;
  --ims-red-100:   #fee2e2;
  --ims-red-200:   #fecaca;
  --ims-red-500:   #ef4444;
  --ims-red-600:   #dc2626;   /* PRIMARIO de error */
  --ims-red-700:   #b91c1c;

  /* Amarillo/Ambar (warning, stock bajo, pendiente) */
  --ims-amber-50:  #fffbeb;
  --ims-amber-100: #fef3c7;
  --ims-amber-200: #fde68a;
  --ims-amber-500: #f59e0b;
  --ims-amber-600: #d97706;   /* PRIMARIO de warning */
  --ims-amber-700: #b45309;

  /* Azul (info, links secundarios, badge "Nuevo") */
  --ims-blue-50:   #eff6ff;
  --ims-blue-100:  #dbeafe;
  --ims-blue-200:  #bfdbfe;
  --ims-blue-500:  #3b82f6;
  --ims-blue-600:  #2563eb;   /* PRIMARIO de info */
  --ims-blue-700:  #1d4ed8;

  /* Naranja sutil (mas vendido, oferta) */
  --ims-orange-50:  #fff7ed;
  --ims-orange-100: #ffedd5;
  --ims-orange-500: #f97316;
  --ims-orange-600: #ea580c;
  --ims-orange-700: #c2410c;

  /* ─── Aliases semanticos (usalos en lugar de los colores directos) ── */
  --ims-bg:           var(--ims-gray-0);     /* fondo principal */
  --ims-bg-subtle:    var(--ims-gray-50);    /* fondos de secciones sutiles */
  --ims-bg-muted:     var(--ims-gray-100);   /* hovers, inputs disabled */

  --ims-text:         var(--ims-gray-900);   /* texto principal */
  --ims-text-soft:    var(--ims-gray-700);   /* texto cuerpo */
  --ims-text-mute:    var(--ims-gray-500);   /* texto secundario */
  --ims-text-faint:   var(--ims-gray-400);   /* texto auxiliar/placeholder */
  --ims-text-on-brand: #ffffff;              /* texto sobre verde */

  --ims-border:       var(--ims-gray-200);   /* borde sutil */
  --ims-border-strong: var(--ims-gray-300);  /* borde definido */

  --ims-primary:      var(--ims-brand-600);
  --ims-primary-hover: var(--ims-brand-700);
  --ims-primary-soft: var(--ims-brand-50);

  /* ─── Tipografia ──────────────────────────────────────────────────── */
  --ims-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ims-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Escala tipografica (modular scale 1.125) */
  --ims-text-xs:   0.75rem;    /* 12px - badges, labels chicos */
  --ims-text-sm:   0.875rem;   /* 14px - texto auxiliar */
  --ims-text-base: 1rem;       /* 16px - cuerpo */
  --ims-text-md:   1.125rem;   /* 18px - cuerpo enfatizado */
  --ims-text-lg:   1.25rem;    /* 20px - subtitulos */
  --ims-text-xl:   1.5rem;     /* 24px - titulos seccion */
  --ims-text-2xl:  1.875rem;   /* 30px - hero pequeno */
  --ims-text-3xl:  2.25rem;    /* 36px - hero grande */

  --ims-leading-tight:  1.2;
  --ims-leading-normal: 1.5;
  --ims-leading-relaxed: 1.65;
  --ims-leading-loose:  1.7;

  --ims-weight-regular: 400;
  --ims-weight-medium:  500;
  --ims-weight-semibold: 600;
  --ims-weight-bold:    700;

  /* ─── Espaciado (escala 4px) ──────────────────────────────────────── */
  --ims-space-0:  0;
  --ims-space-1:  0.25rem;   /* 4px */
  --ims-space-2:  0.5rem;    /* 8px */
  --ims-space-3:  0.75rem;   /* 12px */
  --ims-space-4:  1rem;      /* 16px */
  --ims-space-5:  1.25rem;   /* 20px */
  --ims-space-6:  1.5rem;    /* 24px */
  --ims-space-8:  2rem;      /* 32px */
  --ims-space-10: 2.5rem;    /* 40px */
  --ims-space-12: 3rem;      /* 48px */
  --ims-space-16: 4rem;      /* 64px */

  /* ─── Bordes ──────────────────────────────────────────────────────── */
  --ims-radius-sm:   4px;
  --ims-radius-md:   8px;     /* default para cards, inputs */
  --ims-radius-lg:   12px;    /* botones grandes, modales */
  --ims-radius-xl:   16px;
  --ims-radius-full: 9999px;  /* badges pildora, avatares */

  /* ─── Sombras (sutiles, moderno) ──────────────────────────────────── */
  --ims-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --ims-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --ims-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --ims-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.08);
  --ims-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.05);

  /* ─── Transiciones ────────────────────────────────────────────────── */
  --ims-transition-fast:  120ms ease-out;
  --ims-transition:       200ms ease-out;
  --ims-transition-slow:  300ms ease-out;

  /* ─── Z-index ─────────────────────────────────────────────────────── */
  --ims-z-dropdown: 1000;
  --ims-z-sticky:   1020;
  --ims-z-fixed:    1030;
  --ims-z-modal-backdrop: 1040;
  --ims-z-modal:    1050;
  --ims-z-popover:  1060;
  --ims-z-tooltip:  1070;
  --ims-z-toast:    1080;
}

/* ====================================================================
   Reset suave (no destruye Bootstrap, solo afina)
   ==================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--ims-font-sans);
  font-size: var(--ims-text-base);
  line-height: var(--ims-leading-normal);
  color: var(--ims-text-soft);
  background: var(--ims-bg-subtle);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ====================================================================
   Tipografia
   ==================================================================== */
.ims-h1 { font-size: var(--ims-text-3xl); line-height: var(--ims-leading-tight); font-weight: var(--ims-weight-bold);    color: var(--ims-text); letter-spacing: -0.02em; }
.ims-h2 { font-size: var(--ims-text-2xl); line-height: var(--ims-leading-tight); font-weight: var(--ims-weight-bold);    color: var(--ims-text); letter-spacing: -0.01em; }
.ims-h3 { font-size: var(--ims-text-xl);  line-height: var(--ims-leading-tight); font-weight: var(--ims-weight-semibold); color: var(--ims-text); }
.ims-h4 { font-size: var(--ims-text-lg);  line-height: var(--ims-leading-tight); font-weight: var(--ims-weight-semibold); color: var(--ims-text); }
.ims-body { font-size: var(--ims-text-base); line-height: var(--ims-leading-normal); color: var(--ims-text-soft); }
.ims-body-sm { font-size: var(--ims-text-sm); line-height: var(--ims-leading-normal); color: var(--ims-text-soft); }
.ims-caption { font-size: var(--ims-text-xs); color: var(--ims-text-mute); }

.ims-text-mute  { color: var(--ims-text-mute) !important; }
.ims-text-faint { color: var(--ims-text-faint) !important; }
.ims-text-brand { color: var(--ims-primary) !important; }
.ims-text-error { color: var(--ims-red-600) !important; }
.ims-text-warn  { color: var(--ims-amber-700) !important; }
.ims-text-info  { color: var(--ims-blue-600) !important; }

/* ====================================================================
   Botones
   ==================================================================== */
.ims-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ims-space-2);
  padding: var(--ims-space-3) var(--ims-space-5);
  font-family: inherit;
  font-size: var(--ims-text-sm);
  font-weight: var(--ims-weight-semibold);
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--ims-radius-md);
  cursor: pointer;
  transition: background-color var(--ims-transition-fast),
              border-color var(--ims-transition-fast),
              color var(--ims-transition-fast),
              box-shadow var(--ims-transition-fast),
              transform var(--ims-transition-fast);
  user-select: none;
  white-space: nowrap;
}
.ims-btn:disabled,
.ims-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.ims-btn:focus-visible {
  outline: 2px solid var(--ims-brand-300);
  outline-offset: 2px;
}

/* Tamanos */
.ims-btn-sm { padding: var(--ims-space-2) var(--ims-space-3); font-size: var(--ims-text-xs); }
.ims-btn-lg { padding: var(--ims-space-4) var(--ims-space-6); font-size: var(--ims-text-base); border-radius: var(--ims-radius-lg); }

/* Variante: PRIMARY (verde marca, accion principal) */
.ims-btn-primary {
  background: var(--ims-primary);
  color: var(--ims-text-on-brand);
  border-color: var(--ims-primary);
}
.ims-btn-primary:hover:not(:disabled) {
  background: var(--ims-primary-hover);
  border-color: var(--ims-primary-hover);
  box-shadow: var(--ims-shadow-sm);
  transform: translateY(-1px);
}
.ims-btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Variante: SECONDARY (blanco con borde, accion secundaria) */
.ims-btn-secondary {
  background: var(--ims-bg);
  color: var(--ims-text);
  border-color: var(--ims-border-strong);
}
.ims-btn-secondary:hover:not(:disabled) {
  background: var(--ims-bg-muted);
  border-color: var(--ims-gray-400);
}

/* Variante: GHOST (sin fondo, texto, terciaria) */
.ims-btn-ghost {
  background: transparent;
  color: var(--ims-text-soft);
  border-color: transparent;
}
.ims-btn-ghost:hover:not(:disabled) {
  background: var(--ims-bg-muted);
  color: var(--ims-text);
}

/* Variante: DANGER (rojo, eliminar/destructivo) */
.ims-btn-danger {
  background: var(--ims-red-600);
  color: #fff;
  border-color: var(--ims-red-600);
}
.ims-btn-danger:hover:not(:disabled) {
  background: var(--ims-red-700);
  border-color: var(--ims-red-700);
  box-shadow: var(--ims-shadow-sm);
  transform: translateY(-1px);
}

/* Variante: DANGER OUTLINE */
.ims-btn-danger-outline {
  background: var(--ims-bg);
  color: var(--ims-red-600);
  border-color: var(--ims-red-200);
}
.ims-btn-danger-outline:hover:not(:disabled) {
  background: var(--ims-red-50);
  border-color: var(--ims-red-500);
  color: var(--ims-red-700);
}

/* Loading state */
.ims-btn[data-loading="true"] {
  pointer-events: none;
  position: relative;
  color: transparent;
}
.ims-btn[data-loading="true"]::after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ims-spin 0.6s linear infinite;
  color: var(--ims-text-on-brand);
}
.ims-btn-secondary[data-loading="true"]::after,
.ims-btn-ghost[data-loading="true"]::after { color: var(--ims-text-soft); }

@keyframes ims-spin {
  to { transform: rotate(360deg); }
}

/* Boton ICONO (cuadrado, solo icono) */
.ims-btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--ims-radius-md);
}
.ims-btn-icon.ims-btn-sm { width: 2rem; height: 2rem; }

/* ====================================================================
   Cards
   ==================================================================== */
.ims-card {
  background: var(--ims-bg);
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-md);
  overflow: hidden;
  transition: box-shadow var(--ims-transition),
              transform var(--ims-transition),
              border-color var(--ims-transition);
}
/* Helpers de hover y body para cards genericas (UTILIDAD REUSABLE
   - actualmente sin usar pero disponible para nuevas pantallas que
   necesiten card hoverable: ej. tarjetas de tienda, de cliente, etc.) */
.ims-card-hover:hover {
  border-color: var(--ims-gray-300);
  box-shadow: var(--ims-shadow-md);
  transform: translateY(-2px);
}
.ims-card-body { padding: var(--ims-space-4); }

/* ====================================================================
   Card de PRODUCTO (componente principal del catalogo)
   ==================================================================== */
.ims-product-card {
  background: var(--ims-bg);
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-md);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ims-transition),
              transform var(--ims-transition),
              border-color var(--ims-transition);
  cursor: pointer;
}
.ims-product-card:hover {
  border-color: var(--ims-gray-300);
  box-shadow: var(--ims-shadow-lg);
  transform: translateY(-3px);
}
.ims-product-card.is-out-of-stock {
  opacity: 0.6;
}
.ims-product-card.is-out-of-stock:hover {
  transform: none;
  border-color: var(--ims-border);
}

/* Imagen del producto - ratio 1:1, fondo gris muy sutil */
.ims-product-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--ims-gray-50);
  overflow: hidden;
}
.ims-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--ims-transition-slow);
}
.ims-product-card:hover .ims-product-image img {
  transform: scale(1.04);
}

/* Badges flotando sobre la imagen (esquina superior izq) */
.ims-product-badges {
  position: absolute;
  top: var(--ims-space-2);
  left: var(--ims-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--ims-space-1);
  z-index: 1;
}

/* Botones de accion sobre la imagen (esquina superior der) */
.ims-product-actions {
  position: absolute;
  top: var(--ims-space-2);
  right: var(--ims-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--ims-space-1);
  z-index: 1;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--ims-transition), transform var(--ims-transition);
}
.ims-product-card:hover .ims-product-actions {
  opacity: 1;
  transform: translateX(0);
}
@media (hover: none) {
  /* En tactil siempre visibles */
  .ims-product-actions { opacity: 1; transform: translateX(0); }
}

/* Cuerpo de la card */
.ims-product-body {
  padding: var(--ims-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--ims-space-1);
  flex: 1;
}

/* Nombre del producto: 1 sola linea con elipsis al final.
   Esto evita que las cards tengan alturas distintas cuando los nombres
   son muy largos vs muy cortos (problema visual reportado por usuario). */
.ims-product-name {
  font-size: var(--ims-text-sm);
  font-weight: var(--ims-weight-medium);
  color: var(--ims-text);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

/* Descripcion corta debajo del titulo (2 lineas max) */
.ims-product-desc {
  font-size: 11px;
  line-height: 1.35;
  color: var(--ims-text-mute);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  margin-bottom: var(--ims-space-1);
}

/* Meta-info inline de producto (rating, ventas, codigo, etc.)
   UTILIDAD REUSABLE - actualmente sin usar pero pensada para mostrar
   info secundaria en cards si en el futuro se agregan ratings o vistas. */
.ims-product-meta {
  display: flex;
  align-items: center;
  gap: var(--ims-space-2);
  font-size: var(--ims-text-xs);
  color: var(--ims-text-mute);
}
.ims-product-meta .ims-stat {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Fila inferior de la card: precio + stock a la izquierda, boton + a la derecha */
.ims-product-footer-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ims-space-2);
  margin-top: auto;
  padding-top: var(--ims-space-2);
}
.ims-product-footer-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.ims-product-price {
  display: flex;
  align-items: baseline;
  gap: var(--ims-space-1);
}
.ims-product-price-current {
  font-size: var(--ims-text-md);
  font-weight: var(--ims-weight-bold);
  color: var(--ims-text);
  letter-spacing: -0.01em;
}
.ims-product-price-currency {
  font-size: var(--ims-text-xs);
  color: var(--ims-text-mute);
  font-weight: var(--ims-weight-medium);
}
.ims-product-price-old {
  font-size: var(--ims-text-xs);
  color: var(--ims-text-faint);
  text-decoration: line-through;
}
.ims-product-stock {
  font-size: var(--ims-text-xs);
  color: var(--ims-text-mute);
}
.ims-product-stock.is-low { color: var(--ims-amber-700); font-weight: var(--ims-weight-medium); }
.ims-product-stock.is-out { color: var(--ims-red-600); font-weight: var(--ims-weight-medium); }

/* Boton "agregar al carrito" compacto, siempre visible, en la esquina inferior derecha
   de la card (junto al precio). Reemplaza el boton de ancho completo de versiones anteriores. */
.ims-product-add-btn {
  flex-shrink: 0;
}

/* ====================================================================
   Badges
   ==================================================================== */
.ims-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: var(--ims-text-xs);
  font-weight: var(--ims-weight-semibold);
  line-height: 1.4;
  border-radius: var(--ims-radius-full);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.ims-badge-success {
  background: var(--ims-brand-100);
  color: var(--ims-brand-800);
}
.ims-badge-warn {
  background: var(--ims-amber-100);
  color: var(--ims-amber-700);
}
.ims-badge-error {
  background: var(--ims-red-100);
  color: var(--ims-red-700);
}
.ims-badge-info {
  background: var(--ims-blue-100);
  color: var(--ims-blue-700);
}
.ims-badge-orange {
  background: var(--ims-orange-100);
  color: var(--ims-orange-700);
}
.ims-badge-neutral {
  background: var(--ims-gray-100);
  color: var(--ims-gray-700);
}
/* Variante con punto antes (estilo "live indicator") */
.ims-badge-dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ====================================================================
   Inputs y forms
   ==================================================================== */
.ims-input,
.ims-select,
.ims-textarea {
  display: block;
  width: 100%;
  padding: var(--ims-space-3) var(--ims-space-4);
  font-family: inherit;
  font-size: var(--ims-text-sm);
  line-height: 1.4;
  color: var(--ims-text);
  background: var(--ims-bg);
  border: 1px solid var(--ims-border-strong);
  border-radius: var(--ims-radius-md);
  transition: border-color var(--ims-transition-fast),
              box-shadow var(--ims-transition-fast);
}
.ims-input::placeholder,
.ims-textarea::placeholder { color: var(--ims-text-faint); }
.ims-input:hover:not(:disabled),
.ims-select:hover:not(:disabled),
.ims-textarea:hover:not(:disabled) {
  border-color: var(--ims-gray-400);
}
.ims-input:focus,
.ims-select:focus,
.ims-textarea:focus {
  outline: none;
  border-color: var(--ims-brand-500);
  box-shadow: 0 0 0 3px rgb(15 110 60 / 0.1);
}
.ims-input:disabled,
.ims-select:disabled,
.ims-textarea:disabled {
  background: var(--ims-bg-muted);
  color: var(--ims-text-faint);
  cursor: not-allowed;
}
.ims-input.is-error,
.ims-select.is-error {
  border-color: var(--ims-red-500);
}
.ims-input.is-error:focus {
  box-shadow: 0 0 0 3px rgb(239 68 68 / 0.1);
}

/* Buscador con icono */
.ims-search {
  position: relative;
}
.ims-search .ims-search-icon {
  position: absolute;
  left: var(--ims-space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--ims-text-faint);
  pointer-events: none;
}
.ims-search .ims-input {
  padding-left: 2.75rem;
}

.ims-label {
  display: block;
  font-size: var(--ims-text-sm);
  font-weight: var(--ims-weight-medium);
  color: var(--ims-text-soft);
  margin-bottom: var(--ims-space-2);
}
.ims-help {
  font-size: var(--ims-text-xs);
  color: var(--ims-text-mute);
  margin-top: var(--ims-space-1);
}

/* ====================================================================
   Header / Navbar (estilo tienda moderna)
   ==================================================================== */
.ims-header {
  position: sticky;
  top: 0;
  z-index: var(--ims-z-sticky);
  background: var(--ims-bg);
  border-bottom: 1px solid var(--ims-border);
  transition: box-shadow var(--ims-transition);
}
.ims-header.is-scrolled {
  box-shadow: var(--ims-shadow-sm);
}
.ims-header-inner {
  display: flex;
  align-items: center;
  gap: var(--ims-space-4);
  padding: var(--ims-space-3) var(--ims-space-4);
  max-width: 1400px;
  margin: 0 auto;
}
.ims-header-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--ims-space-2);
  font-weight: var(--ims-weight-bold);
  font-size: var(--ims-text-md);
  color: var(--ims-text);
  text-decoration: none;
}
.ims-header-logo-mark {
  width: 32px;
  height: 32px;
  background: var(--ims-primary);
  border-radius: var(--ims-radius-md);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: var(--ims-weight-bold);
}
.ims-header-search {
  flex: 1;
  max-width: 600px;
}
.ims-header-actions {
  display: flex;
  align-items: center;
  gap: var(--ims-space-2);
  flex-shrink: 0;
}

/* Cart button con contador */
.ims-cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ims-radius-md);
  color: var(--ims-text-soft);
  cursor: pointer;
  transition: background-color var(--ims-transition-fast);
}
.ims-cart-btn:hover {
  background: var(--ims-bg-muted);
  color: var(--ims-text);
}
.ims-cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 5px;
  background: var(--ims-primary);
  color: #fff;
  font-size: 11px;
  font-weight: var(--ims-weight-bold);
  border-radius: var(--ims-radius-full);
  display: grid;
  place-items: center;
  border: 2px solid var(--ims-bg);
}

/* ====================================================================
   Loading skeleton (mientras carga contenido)
   ==================================================================== */
.ims-skeleton {
  background: linear-gradient(
    90deg,
    var(--ims-gray-100) 25%,
    var(--ims-gray-200) 50%,
    var(--ims-gray-100) 75%
  );
  background-size: 200% 100%;
  animation: ims-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--ims-radius-sm);
}
@keyframes ims-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ====================================================================
   Toast notifications
   ==================================================================== */
.ims-toast-container {
  position: fixed;
  top: var(--ims-space-4);
  right: var(--ims-space-4);
  z-index: var(--ims-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--ims-space-2);
  pointer-events: none;
  max-width: calc(100vw - var(--ims-space-4) * 2);
}

@media (max-width: 640px) {
  /* En movil, mostrar arriba pero ocupando casi todo el ancho */
  .ims-toast-container {
    top: var(--ims-space-2);
    right: var(--ims-space-2);
    left: var(--ims-space-2);
    max-width: none;
  }
}

.ims-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--ims-space-3);
  padding: var(--ims-space-3) var(--ims-space-4);
  background: var(--ims-bg);
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-md);
  box-shadow: var(--ims-shadow-lg);
  font-size: var(--ims-text-sm);
  color: var(--ims-text);
  min-width: 300px;
  max-width: 420px;
  pointer-events: auto;
  /* Animacion entrada/salida */
  opacity: 0;
  transform: translateX(120%);
  transition: opacity var(--ims-transition),
              transform var(--ims-transition) cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 640px) {
  .ims-toast {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    transform: translateY(-120%);
  }
}

.ims-toast.is-visible {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 640px) {
  .ims-toast.is-visible {
    transform: translateY(0);
  }
}

.ims-toast.is-leaving {
  opacity: 0;
  transform: translateX(120%);
}
@media (max-width: 640px) {
  .ims-toast.is-leaving {
    transform: translateY(-120%);
  }
}

/* Variantes (linea de color a la izquierda) */
.ims-toast-success {
  border-left: 4px solid var(--ims-brand-600);
}
.ims-toast-error {
  border-left: 4px solid var(--ims-red-600);
}
.ims-toast-warn {
  border-left: 4px solid var(--ims-amber-600);
}
.ims-toast-info {
  border-left: 4px solid var(--ims-blue-600);
}

/* Boton cerrar del toast */
.ims-toast-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ims-text-faint);
  cursor: pointer;
  border-radius: var(--ims-radius-sm);
  transition: background-color var(--ims-transition-fast),
              color var(--ims-transition-fast);
  font-size: 1.1rem;
  line-height: 1;
}
.ims-toast-close:hover {
  background: var(--ims-bg-muted);
  color: var(--ims-text);
}

/* ====================================================================
   Categoria chips (filtros visuales)
   ==================================================================== */
.ims-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ims-space-2);
  padding: var(--ims-space-2) var(--ims-space-4);
  font-size: var(--ims-text-sm);
  font-weight: var(--ims-weight-medium);
  background: var(--ims-bg);
  color: var(--ims-text-soft);
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-full);
  cursor: pointer;
  transition: all var(--ims-transition-fast);
  white-space: nowrap;
  text-decoration: none;
}
.ims-chip:hover {
  border-color: var(--ims-gray-400);
  color: var(--ims-text);
}
.ims-chip.is-active {
  background: var(--ims-primary);
  color: #fff;
  border-color: var(--ims-primary);
}

/* ====================================================================
   Boton CATEGORIAS + Mega-menu
   ==================================================================== */
.ims-cat-dropdown { flex-shrink: 0; }

.ims-cat-trigger {
  white-space: nowrap;
  max-width: 200px;
}
.ims-cat-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}
.ims-cat-trigger-chev {
  font-size: 0.75rem;
  margin-left: var(--ims-space-1);
  opacity: 0.6;
  transition: transform var(--ims-transition-fast);
}
.ims-cat-trigger[aria-expanded="true"] .ims-cat-trigger-chev {
  transform: rotate(180deg);
}

/* El mega-menu tiene que sobreescribir el dropdown-menu de Bootstrap */
.dropdown-menu.ims-cat-megamenu {
  width: 720px;
  max-width: calc(100vw - 32px);
  padding: 0;
  margin-top: var(--ims-space-2);
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-lg);
  box-shadow: var(--ims-shadow-xl);
  background: var(--ims-bg);
  overflow: hidden;
}
.ims-cat-megamenu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ims-space-4) var(--ims-space-5);
  border-bottom: 1px solid var(--ims-border);
  background: var(--ims-bg-subtle);
}
.ims-cat-megamenu-head .ims-h4 {
  font-size: var(--ims-text-md);
}
.ims-cat-megamenu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ims-space-2);
  padding: var(--ims-space-3);
  max-height: 60vh;
  overflow-y: auto;
}

/* Tile de categoria (cada item del grid) */
.ims-cat-tile {
  display: flex;
  align-items: center;
  gap: var(--ims-space-3);
  padding: var(--ims-space-3);
  border: 1px solid transparent;
  border-radius: var(--ims-radius-md);
  color: var(--ims-text-soft);
  text-decoration: none;
  transition: all var(--ims-transition-fast);
  min-width: 0;
  cursor: pointer;
}
.ims-cat-tile:hover {
  background: var(--ims-bg-subtle);
  border-color: var(--ims-border);
  color: var(--ims-text);
}
.ims-cat-tile.is-active {
  background: var(--ims-brand-50);
  border-color: var(--ims-brand-200);
  color: var(--ims-brand-700);
  font-weight: var(--ims-weight-semibold);
}
.ims-cat-tile i:first-child {
  font-size: 1.25rem;
  color: var(--ims-text-mute);
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}
.ims-cat-tile.is-active i:first-child {
  color: var(--ims-primary);
}
.ims-cat-tile-name {
  font-size: var(--ims-text-sm);
  font-weight: var(--ims-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* Responsive del mega-menu */
@media (max-width: 768px) {
  .dropdown-menu.ims-cat-megamenu {
    width: calc(100vw - 24px);
  }
  .ims-cat-megamenu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ====================================================================
   Bottom nav movil (visible solo en mobile, < 768px)
   ==================================================================== */
.ims-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--ims-z-fixed);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background: var(--ims-bg);
  border-top: 1px solid var(--ims-border);
  padding: var(--ims-space-1) 0;
  box-shadow: 0 -2px 8px rgb(0 0 0 / 0.04);
  padding-bottom: max(var(--ims-space-1), env(safe-area-inset-bottom));
}
.ims-bottom-nav-link {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--ims-space-2) var(--ims-space-1);
  font-size: 11px;
  font-weight: var(--ims-weight-medium);
  color: var(--ims-text-mute);
  text-decoration: none;
  transition: color var(--ims-transition-fast);
  min-width: 0;
}
.ims-bottom-nav-link:hover,
.ims-bottom-nav-link:active,
.ims-bottom-nav-link.is-active {
  color: var(--ims-primary);
}
.ims-bottom-nav-link i {
  font-size: 1.2rem;
  line-height: 1;
}
.ims-bottom-nav-link span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ====================================================================
   KPI Card (estadisticas clickeables como filtro)
   ==================================================================== */
.ims-kpi-card {
  background: var(--ims-bg);
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-md);
  padding: var(--ims-space-3) var(--ims-space-4);
  cursor: pointer;
  transition: border-color var(--ims-transition-fast),
              box-shadow var(--ims-transition-fast),
              transform var(--ims-transition-fast);
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: var(--ims-space-2);
  min-height: 78px;
}
.ims-kpi-card:hover {
  border-color: var(--ims-gray-400);
  box-shadow: var(--ims-shadow-sm);
}
.ims-kpi-card.is-active {
  border-width: 2px;
  padding: calc(var(--ims-space-3) - 1px) calc(var(--ims-space-4) - 1px);
  box-shadow: var(--ims-shadow-sm);
}

/* Header del KPI: label + icono */
.ims-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ims-space-2);
}
.ims-kpi-label {
  font-size: var(--ims-text-xs);
  font-weight: var(--ims-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ims-kpi-icon {
  font-size: 1rem;
  flex-shrink: 0;
  opacity: 0.8;
}

/* Cuerpo: numero principal grande + stock chico */
.ims-kpi-body {
  display: flex;
  align-items: baseline;
  gap: var(--ims-space-2);
  flex-wrap: wrap;
}
.ims-kpi-number {
  font-size: var(--ims-text-xl);
  font-weight: var(--ims-weight-bold);
  color: var(--ims-text);
  line-height: 1;
  letter-spacing: -0.01em;
}
.ims-kpi-stock {
  font-size: var(--ims-text-xs);
  color: var(--ims-text-mute);
  font-weight: var(--ims-weight-medium);
}

/* Variantes por color (estado) */
.ims-kpi-card.kpi-total       { background: var(--ims-blue-50); }
.ims-kpi-card.kpi-total .ims-kpi-label,
.ims-kpi-card.kpi-total .ims-kpi-icon { color: var(--ims-blue-700); }
.ims-kpi-card.kpi-total.is-active     { border-color: var(--ims-blue-500); }

.ims-kpi-card.kpi-activo      { background: var(--ims-brand-50); }
.ims-kpi-card.kpi-activo .ims-kpi-label,
.ims-kpi-card.kpi-activo .ims-kpi-icon { color: var(--ims-brand-700); }
.ims-kpi-card.kpi-activo.is-active     { border-color: var(--ims-brand-500); }

.ims-kpi-card.kpi-pendiente   { background: var(--ims-amber-50); }
.ims-kpi-card.kpi-pendiente .ims-kpi-label,
.ims-kpi-card.kpi-pendiente .ims-kpi-icon { color: var(--ims-amber-700); }
.ims-kpi-card.kpi-pendiente.is-active     { border-color: var(--ims-amber-500); }

.ims-kpi-card.kpi-agotado     { background: var(--ims-red-50); }
.ims-kpi-card.kpi-agotado .ims-kpi-label,
.ims-kpi-card.kpi-agotado .ims-kpi-icon { color: var(--ims-red-700); }
.ims-kpi-card.kpi-agotado.is-active     { border-color: var(--ims-red-500); }

.ims-kpi-card.kpi-inactivo    { background: var(--ims-gray-100); }
.ims-kpi-card.kpi-inactivo .ims-kpi-label,
.ims-kpi-card.kpi-inactivo .ims-kpi-icon { color: var(--ims-gray-700); }
.ims-kpi-card.kpi-inactivo.is-active     { border-color: var(--ims-gray-500); }

.ims-kpi-card.kpi-critico     { background: #ecfeff; }   /* cyan-50 */
.ims-kpi-card.kpi-critico .ims-kpi-label,
.ims-kpi-card.kpi-critico .ims-kpi-icon { color: #0e7490; }
.ims-kpi-card.kpi-critico.is-active     { border-color: #06b6d4; }

/* Input de umbral del critico */
.ims-kpi-card .ims-kpi-thresh {
  display: inline-flex;
  align-items: center;
  gap: var(--ims-space-1);
}
.ims-kpi-card .ims-kpi-thresh input {
  width: 50px;
  padding: 2px 6px;
  font-size: var(--ims-text-xs);
  border: 1px solid var(--ims-border-strong);
  border-radius: var(--ims-radius-sm);
  text-align: center;
}
.ims-kpi-card .ims-kpi-thresh input:focus {
  outline: none;
  border-color: var(--ims-brand-500);
  box-shadow: 0 0 0 2px rgb(15 110 60 / 0.1);
}

/* ====================================================================
   Toolbar de pagina (titulo + acciones)
   ==================================================================== */
.ims-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ims-space-3);
  flex-wrap: wrap;
}
.ims-toolbar-title {
  font-size: var(--ims-text-sm);
  font-weight: var(--ims-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ims-text-mute);
  margin: 0;
}
.ims-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--ims-space-2);
  flex-wrap: wrap;
}
.ims-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 0.4);
  z-index: var(--ims-z-modal-backdrop);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ims-transition);
}
.ims-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.ims-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 100%;
  max-width: 420px;
  background: var(--ims-bg);
  z-index: var(--ims-z-modal);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--ims-transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--ims-shadow-xl);
}
.ims-drawer.is-open { transform: translateX(0); }
.ims-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ims-space-4) var(--ims-space-5);
  border-bottom: 1px solid var(--ims-border);
}
.ims-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ims-space-4);
}
.ims-drawer-footer {
  padding: var(--ims-space-4) var(--ims-space-5);
  border-top: 1px solid var(--ims-border);
  background: var(--ims-bg-subtle);
}

/* ====================================================================
   Carrito - Toggle modo (Venta / Compra) y items
   ==================================================================== */
.ims-cart-mode-toggle {
  display: flex;
  gap: 0;
  background: var(--ims-bg-muted);
  border-radius: var(--ims-radius-md);
  padding: 4px;
  margin-bottom: var(--ims-space-4);
}
.ims-cart-mode-btn {
  flex: 1;
  padding: var(--ims-space-2) var(--ims-space-3);
  background: transparent;
  border: none;
  border-radius: calc(var(--ims-radius-md) - 2px);
  font-size: var(--ims-text-sm);
  font-weight: var(--ims-weight-medium);
  color: var(--ims-text-mute);
  cursor: pointer;
  transition: all var(--ims-transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ims-space-2);
}
.ims-cart-mode-btn:hover {
  color: var(--ims-text);
}
.ims-cart-mode-btn.is-active,
.ims-cart-mode-btn.active {
  background: var(--ims-bg);
  color: var(--ims-primary);
  font-weight: var(--ims-weight-semibold);
  box-shadow: var(--ims-shadow-xs);
}

/* Lista de items del carrito */
.ims-cart-list {
  display: flex;
  flex-direction: column;
}
.ims-cart-item {
  display: flex;
  gap: var(--ims-space-3);
  padding: var(--ims-space-3) 0;
  border-bottom: 1px solid var(--ims-border);
  align-items: flex-start;
}
.ims-cart-item:last-child {
  border-bottom: none;
}
.ims-cart-item-img {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: var(--ims-radius-md);
  object-fit: cover;
  border: 1px solid var(--ims-border);
}
.ims-cart-item-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ims-cart-item-name {
  font-size: var(--ims-text-sm);
  font-weight: var(--ims-weight-medium);
  color: var(--ims-text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ims-cart-item-price {
  font-size: var(--ims-text-xs);
  color: var(--ims-text-mute);
}
.ims-cart-item-qty {
  display: flex;
  align-items: center;
  gap: var(--ims-space-2);
  margin-top: 2px;
}
.ims-cart-item-total {
  font-size: var(--ims-text-sm);
  font-weight: var(--ims-weight-bold);
  color: var(--ims-text);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Columna derecha del item: total arriba + boton eliminar abajo. */
.ims-cart-item-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ims-space-2);
  flex-shrink: 0;
  margin-left: auto;
}

/* Controles +/- de cantidad en cada item del carrito. */
.ims-cart-qty-controls {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-md);
  background: var(--ims-bg);
  margin-top: 4px;
  width: fit-content;
}
.ims-cart-qty-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--ims-text);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
  transition: background-color var(--ims-transition-fast);
}
.ims-cart-qty-btn:hover:not([disabled]) {
  background: var(--ims-bg-muted);
  color: var(--ims-primary);
}
.ims-cart-qty-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.ims-cart-qty-num {
  min-width: 28px;
  text-align: center;
  font-weight: var(--ims-weight-semibold);
  font-size: var(--ims-text-sm);
  color: var(--ims-text);
  border-left: 1px solid var(--ims-border);
  border-right: 1px solid var(--ims-border);
  padding: 0 var(--ims-space-2);
  line-height: 28px;
}

/* Boton para eliminar un item completo del carrito (icono trash). */
.ims-cart-remove-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-md);
  color: var(--ims-text-faint);
  cursor: pointer;
  transition: all var(--ims-transition-fast);
  font-size: 1rem;
}
.ims-cart-remove-btn:hover {
  background: var(--ims-red-50);
  border-color: var(--ims-red-200);
  color: var(--ims-red-600);
}

/* ====================================================================
   Empty state
   ==================================================================== */
.ims-empty {
  text-align: center;
  padding: var(--ims-space-12) var(--ims-space-4);
  color: var(--ims-text-mute);
}
.ims-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--ims-space-4);
  color: var(--ims-text-faint);
}
.ims-empty-title {
  font-size: var(--ims-text-md);
  font-weight: var(--ims-weight-semibold);
  color: var(--ims-text);
  margin-bottom: var(--ims-space-1);
}

/* ====================================================================
   Utilidades responsive
   ==================================================================== */
@media (max-width: 640px) {
  .ims-header-inner { padding: var(--ims-space-2) var(--ims-space-3); gap: var(--ims-space-2); }
  .ims-product-name { font-size: var(--ims-text-xs); }
  .ims-product-price-current { font-size: var(--ims-text-base); }
}

/* ====================================================================
   Pagina de detalle de producto (producto.php)
   ==================================================================== */
.ims-product-detail-image {
  position: relative;
  background: var(--ims-gray-50);
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.ims-product-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ims-product-detail-badges {
  position: absolute;
  top: var(--ims-space-3);
  left: var(--ims-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--ims-space-2);
}

.ims-product-detail-info {
  padding: 0;
}

/* Tabla de meta-datos (SKU, ubicacion, etc.) */
.ims-product-detail-meta {
  background: var(--ims-bg-subtle);
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-md);
  padding: var(--ims-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ims-space-2);
}
.ims-product-detail-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ims-space-3);
  padding: var(--ims-space-2) 0;
  font-size: var(--ims-text-sm);
  border-bottom: 1px solid var(--ims-border);
}
.ims-product-detail-meta-row:last-child { border-bottom: none; }
.ims-product-detail-meta-row > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: var(--ims-space-2);
  white-space: nowrap;
  color: var(--ims-text-mute);
}
.ims-product-detail-meta-row > span:last-child {
  font-weight: var(--ims-weight-medium);
  color: var(--ims-text);
  text-align: right;
}

/* ====================================================================
   Zona de administracion (en producto.php)
   ==================================================================== */
.ims-admin-zone {
  background: var(--ims-bg-subtle);
  padding: var(--ims-space-6);
  border-radius: var(--ims-radius-lg);
  margin-left: calc(var(--ims-space-4) * -1);
  margin-right: calc(var(--ims-space-4) * -1);
  border-top: none !important;
}
@media (min-width: 768px) {
  .ims-admin-zone {
    margin-left: 0;
    margin-right: 0;
    border: 1px solid var(--ims-border);
  }
}

/* Tabs de la zona admin */
.ims-admin-tabs {
  border-bottom: 1px solid var(--ims-border);
  gap: var(--ims-space-1);
}
.ims-admin-tabs .nav-link {
  border: none;
  background: transparent;
  color: var(--ims-text-mute);
  font-size: var(--ims-text-sm);
  font-weight: var(--ims-weight-medium);
  padding: var(--ims-space-3) var(--ims-space-4);
  border-radius: var(--ims-radius-md) var(--ims-radius-md) 0 0;
  border-bottom: 2px solid transparent;
  transition: color var(--ims-transition-fast), border-color var(--ims-transition-fast);
}
.ims-admin-tabs .nav-link:hover {
  color: var(--ims-text);
  background: var(--ims-bg);
}
.ims-admin-tabs .nav-link.active {
  color: var(--ims-primary);
  background: var(--ims-bg);
  border-bottom-color: var(--ims-primary);
}

/* Grid de KPIs */
.ims-admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ims-space-3);
  margin-bottom: var(--ims-space-4);
}
@media (min-width: 768px) {
  .ims-admin-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
.ims-admin-kpi {
  background: var(--ims-bg);
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-md);
  padding: var(--ims-space-3) var(--ims-space-4);
}
.ims-admin-kpi-label {
  font-size: var(--ims-text-xs);
  color: var(--ims-text-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--ims-weight-semibold);
  margin-bottom: var(--ims-space-2);
}
.ims-admin-kpi-value {
  font-size: var(--ims-text-md);
  color: var(--ims-text);
  font-weight: var(--ims-weight-bold);
  line-height: 1.2;
}

/* Cards de info admin (Costos, Actividad) */
.ims-admin-card {
  background: var(--ims-bg);
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-md);
  overflow: hidden;
}
.ims-admin-card-header {
  display: flex;
  align-items: center;
  gap: var(--ims-space-2);
  padding: var(--ims-space-3) var(--ims-space-4);
  background: var(--ims-bg-subtle);
  border-bottom: 1px solid var(--ims-border);
  font-size: var(--ims-text-sm);
  font-weight: var(--ims-weight-semibold);
  color: var(--ims-text);
}
.ims-admin-card-header i {
  color: var(--ims-text-mute);
  font-size: 1rem;
}
.ims-admin-card-body {
  padding: var(--ims-space-3) var(--ims-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ims-space-1);
}
.ims-admin-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ims-space-2) 0;
  font-size: var(--ims-text-sm);
  border-bottom: 1px dashed var(--ims-border);
}
.ims-admin-row:last-child { border-bottom: none; }
.ims-admin-row > span:last-child {
  text-align: right;
  color: var(--ims-text);
  font-weight: var(--ims-weight-medium);
}

/* Tabla movimientos dentro de la zona admin */
.ims-admin-zone .table {
  margin-bottom: 0;
  border-collapse: collapse;
  width: 100%;
}
.ims-admin-zone .table thead th {
  background: var(--ims-bg-subtle);
  color: var(--ims-text-mute);
  font-size: var(--ims-text-xs);
  font-weight: var(--ims-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
}
.ims-admin-zone .table tbody td {
  padding: var(--ims-space-2) var(--ims-space-3);
  border-bottom: 1px solid var(--ims-border);
  font-size: var(--ims-text-sm);
}
.ims-admin-zone .table tbody tr:last-child td { border-bottom: none; }

/* ====================================================================
   Modales (estilo design system, encima de Bootstrap)
   ==================================================================== */

/* El contenido del modal se hace con clases ims-modal-*.
   Bootstrap maneja el backdrop, fade, posicion. Solo cambiamos el content. */
.ims-modal-content {
  background: var(--ims-bg) !important;
  border: 1px solid var(--ims-border) !important;
  border-radius: var(--ims-radius-lg) !important;
  box-shadow: var(--ims-shadow-xl) !important;
  overflow: hidden;
}

.ims-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ims-space-3);
  padding: var(--ims-space-4) var(--ims-space-5);
  border-bottom: 1px solid var(--ims-border);
  background: var(--ims-bg);
}

.ims-modal-body {
  padding: var(--ims-space-5);
  overflow-y: auto;
}

.ims-modal-footer {
  padding: var(--ims-space-3) var(--ims-space-5);
  border-top: 1px solid var(--ims-border);
  background: var(--ims-bg-subtle);
  display: flex;
  justify-content: flex-end;
  gap: var(--ims-space-2);
}

/* En movil: que el modal de producto ocupe casi todo el alto */
@media (max-width: 768px) {
  .ims-modal-body { padding: var(--ims-space-4); }
  .ims-modal-header,
  .ims-modal-footer { padding-left: var(--ims-space-4); padding-right: var(--ims-space-4); }
}

/* Bootstrap modal-dialog-scrollable: que el body sea scrollable */
.modal-dialog-scrollable .ims-modal-content {
  max-height: 100%;
}
.modal-dialog-scrollable .ims-modal-body {
  overflow-y: auto;
  flex: 1 1 auto;
}

/* ====================================================================
   Footer global (ims-footer)
   ==================================================================== */
.ims-footer {
  margin-top: var(--ims-space-12);
  background: var(--ims-bg-subtle);
  border-top: 1px solid var(--ims-border);
  color: var(--ims-text-soft);
}

/* En movil, dejar espacio extra al final por el bottom nav */
@media (max-width: 767.98px) {
  .ims-footer {
    padding-bottom: 80px;
  }
}

.ims-footer-title {
  font-size: var(--ims-text-sm);
  font-weight: var(--ims-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ims-text);
  margin-bottom: var(--ims-space-3);
}

.ims-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ims-space-2);
}
.ims-footer-list a {
  color: var(--ims-text-soft);
  text-decoration: none;
  font-size: var(--ims-text-sm);
  transition: color var(--ims-transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--ims-space-2);
}
.ims-footer-list a:hover {
  color: var(--ims-primary);
}

/* Variante con iconos */
.ims-footer-list-icons a i {
  color: var(--ims-text-mute);
  font-size: 1rem;
  flex-shrink: 0;
}
.ims-footer-list-icons a:hover i {
  color: var(--ims-primary);
}

/* Boton circular para redes sociales */
.ims-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ims-radius-full);
  background: var(--ims-bg);
  border: 1px solid var(--ims-border);
  color: var(--ims-text-soft);
  text-decoration: none;
  transition: all var(--ims-transition-fast);
  font-size: 1rem;
}
.ims-footer-social:hover {
  background: var(--ims-primary);
  border-color: var(--ims-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--ims-shadow-sm);
}

/* Linea inferior */
.ims-footer-bottom {
  border-top: 1px solid var(--ims-border);
  margin-top: var(--ims-space-6);
  padding-top: var(--ims-space-4);
}

/* Boton "volver arriba" flotante */
.ims-back-to-top {
  position: fixed;
  right: var(--ims-space-4);
  bottom: var(--ims-space-4);
  z-index: var(--ims-z-fixed);
  width: 44px;
  height: 44px;
  background: var(--ims-primary);
  color: #fff;
  border: none;
  border-radius: var(--ims-radius-full);
  box-shadow: var(--ims-shadow-lg);
  cursor: pointer;
  transition: background var(--ims-transition-fast),
              transform var(--ims-transition-fast),
              opacity var(--ims-transition);
  font-size: 1.25rem;
}
.ims-back-to-top:hover {
  background: var(--ims-primary-hover);
  transform: translateY(-2px);
}
/* En mobile, subir mas para no chocar con bottom nav */
@media (max-width: 767.98px) {
  .ims-back-to-top {
    bottom: 88px;
  }
}

/* ====================================================================
   Prosa de articulos (paginas /pag/)
   ==================================================================== */
.ims-prose {
  color: var(--ims-text-soft);
  font-size: var(--ims-text-base);
  line-height: var(--ims-leading-relaxed);
}
.ims-prose h2,
.ims-prose h3 {
  color: var(--ims-text);
  margin-top: var(--ims-space-6);
  margin-bottom: var(--ims-space-3);
  letter-spacing: -0.01em;
}
.ims-prose h2:first-child,
.ims-prose h3:first-child { margin-top: 0; }

.ims-prose p {
  margin-bottom: var(--ims-space-3);
}
.ims-prose ul,
.ims-prose ol {
  margin-bottom: var(--ims-space-3);
  padding-left: var(--ims-space-6);
}
.ims-prose li {
  margin-bottom: var(--ims-space-2);
}
.ims-prose a {
  color: var(--ims-primary);
  text-decoration: underline;
  text-decoration-color: var(--ims-brand-200);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--ims-transition-fast);
}
.ims-prose a:hover {
  text-decoration-color: var(--ims-primary);
}
.ims-prose strong {
  color: var(--ims-text);
  font-weight: var(--ims-weight-semibold);
}

/* ====================================================================
   Accordion (Bootstrap base, restyle con design system)
   ==================================================================== */
.ims-accordion .accordion-item {
  background: var(--ims-bg);
  border: 1px solid var(--ims-border);
  border-radius: var(--ims-radius-md) !important;
  margin-bottom: var(--ims-space-2);
  overflow: hidden;
}
.ims-accordion .accordion-item:first-of-type,
.ims-accordion .accordion-item:last-of-type {
  border-radius: var(--ims-radius-md) !important;
}
.ims-accordion .accordion-button {
  background: var(--ims-bg);
  color: var(--ims-text);
  font-weight: var(--ims-weight-medium);
  font-size: var(--ims-text-base);
  padding: var(--ims-space-4);
  border: none;
  box-shadow: none;
}
.ims-accordion .accordion-button:not(.collapsed) {
  background: var(--ims-brand-50);
  color: var(--ims-primary);
  box-shadow: none;
}
.ims-accordion .accordion-button:focus {
  box-shadow: 0 0 0 3px rgb(15 110 60 / 0.1);
  border-color: var(--ims-primary);
}
.ims-accordion .accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2371717a'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
.ims-accordion .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f6e3c'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
.ims-accordion .accordion-body {
  padding: var(--ims-space-4);
  color: var(--ims-text-soft);
  font-size: var(--ims-text-sm);
  line-height: var(--ims-leading-relaxed);
  border-top: 1px solid var(--ims-border);
}
.ims-accordion .accordion-body a {
  color: var(--ims-primary);
  text-decoration: underline;
}

/* ====================================================================
   ims-lead — bajada/subtitulo de paginas
   ==================================================================== */
.ims-lead {
  font-size: var(--ims-text-md);
  line-height: var(--ims-leading-relaxed);
  font-weight: var(--ims-weight-regular);
}

/* ====================================================================
   Vista LISTA del catalogo (.ims-product-card-list)
   --------------------------------------------------------------------
   Modificadora del .ims-product-card que hace layout horizontal.
   Se aplica cuando ?vista=lista en el catalogo.

   Solo admin/mod ven esta opcion (boton de cambio de vista en toolbar).
   ==================================================================== */
.ims-product-card-list {
  flex-direction: row;
  align-items: stretch;
  min-height: 120px;
}

/* Imagen mas pequena en lista (no ocupa toda la card) */
.ims-product-card-list .ims-product-image {
  aspect-ratio: auto;
  width: 120px;
  height: auto;
  flex-shrink: 0;
  min-height: 120px;
}
@media (max-width: 575.98px) {
  .ims-product-card-list .ims-product-image {
    width: 96px;
    min-height: 96px;
  }
}

/* Acciones flotantes (editar/compra): en lista se quedan visibles, no en hover */
.ims-product-card-list .ims-product-actions {
  position: absolute;
  top: var(--ims-space-2);
  right: var(--ims-space-2);
  opacity: 1;
  transform: none;
  flex-direction: row;
}

/* Cuerpo se expande horizontalmente y maneja su propio layout */
.ims-product-card-list .ims-product-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto auto;
  grid-template-areas:
    "name      name"
    "meta      meta"
    "desc      desc"
    "footer    footer";
  gap: var(--ims-space-1) var(--ims-space-3);
  align-items: start;
}

@media (min-width: 768px) {
  /* En desktop, el footer (precio + boton) va en la columna derecha y
     ocupa todo el alto vertical para alinear con el resto */
  .ims-product-card-list .ims-product-body {
    grid-template-columns: 1fr 220px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "name      footer"
      "meta      footer"
      "desc      footer";
  }
}

.ims-product-card-list .ims-product-name {
  grid-area: name;
  /* En lista permitimos que el titulo crezca a 2 lineas (mas espacio horizontal) */
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--ims-text-base);
  font-weight: var(--ims-weight-semibold);
}

.ims-product-card-list .ims-product-desc {
  grid-area: desc;
  font-size: var(--ims-text-xs);
  -webkit-line-clamp: 2;
  min-height: 0;
  margin: 0;
}

/* Meta info de lista (SKU + categoria) - solo visible en vista lista */
.ims-product-list-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ims-space-3);
  font-size: var(--ims-text-xs);
  color: var(--ims-text-mute);
}
.ims-product-list-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ims-product-list-meta i {
  color: var(--ims-text-faint);
  font-size: 0.85rem;
}

/* Footer en lista: precio + boton, alineados a la derecha en desktop */
.ims-product-card-list .ims-product-footer-row {
  grid-area: footer;
  padding-top: 0;
  margin-top: 0;
}

@media (min-width: 768px) {
  .ims-product-card-list .ims-product-footer-row {
    /* En desktop, columna vertical: precio arriba, stock medio, boton abajo */
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    text-align: right;
    gap: var(--ims-space-2);
    height: 100%;
  }
  .ims-product-card-list .ims-product-footer-info {
    align-items: flex-end;
    text-align: right;
  }
}

/* Padding ajustado para layout horizontal */
.ims-product-card-list .ims-product-body {
  padding: var(--ims-space-3) var(--ims-space-4);
}
@media (max-width: 575.98px) {
  .ims-product-card-list .ims-product-body {
    padding: var(--ims-space-2) var(--ims-space-3);
  }
}

/* ====================================================================
   Galeria de imagenes en producto.php (.ims-product-gallery)
   --------------------------------------------------------------------
   Miniaturas debajo de la imagen principal. Click en una miniatura
   cambia la imagen grande arriba.

   - 60x60 en desktop, 50x50 en movil
   - La activa tiene borde verde de marca
   - Hover sutil
   ==================================================================== */
.ims-product-gallery {
  display: flex;
  gap: var(--ims-space-2);
  margin-top: var(--ims-space-3);
  flex-wrap: wrap;
}

.ims-product-gallery-thumb {
  width: 60px;
  height: 60px;
  padding: 0;
  border: 2px solid var(--ims-border);
  border-radius: var(--ims-radius-md);
  background: var(--ims-bg);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--ims-transition-fast),
              transform var(--ims-transition-fast);
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .ims-product-gallery-thumb {
    width: 50px;
    height: 50px;
  }
}

.ims-product-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ims-product-gallery-thumb:hover {
  border-color: var(--ims-gray-400);
  transform: translateY(-1px);
}

.ims-product-gallery-thumb.is-active {
  border-color: var(--ims-primary);
  box-shadow: 0 0 0 1px var(--ims-primary);
}

/* ====================================================================
   Editor de galeria (en modal de gestionar producto)
   --------------------------------------------------------------------
   Solo visible en modulos/admin/gestionar_producto.php cuando se edita.
   ==================================================================== */
.ims-gallery-editor {
  display: flex;
  gap: var(--ims-space-2);
  flex-wrap: wrap;
  padding: var(--ims-space-3);
  background: var(--ims-bg-subtle);
  border: 1px dashed var(--ims-border);
  border-radius: var(--ims-radius-md);
  min-height: 80px;
  align-items: flex-start;
}

.ims-gallery-editor-thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--ims-radius-md);
  overflow: hidden;
  background: var(--ims-bg);
  border: 1px solid var(--ims-border);
  flex-shrink: 0;
  cursor: grab;
  transition: opacity var(--ims-transition-fast),
              transform var(--ims-transition-fast),
              box-shadow var(--ims-transition-fast);
}
.ims-gallery-editor-thumb:hover {
  box-shadow: var(--ims-shadow-md);
}
.ims-gallery-editor-thumb:active {
  cursor: grabbing;
}
.ims-gallery-editor-thumb.is-dragging {
  opacity: 0.5;
  transform: scale(0.95);
}
.ims-gallery-editor-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Boton estrella - marcar como principal (esquina inferior izquierda) */
.ims-gallery-editor-star {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: var(--ims-radius-full);
  background: rgba(0,0,0,0.7);
  color: var(--ims-amber-300);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: all var(--ims-transition-fast);
}
.ims-gallery-editor-star:hover {
  background: var(--ims-amber-700);
  color: #fff;
  transform: scale(1.1);
}

.ims-gallery-editor-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: var(--ims-radius-full);
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background-color var(--ims-transition-fast);
}
.ims-gallery-editor-remove:hover {
  background: var(--ims-red-600);
}

.ims-gallery-editor-add {
  width: 80px;
  height: 80px;
  border: 2px dashed var(--ims-border);
  border-radius: var(--ims-radius-md);
  background: var(--ims-bg);
  color: var(--ims-text-mute);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: var(--ims-text-xs);
  flex-shrink: 0;
  transition: all var(--ims-transition-fast);
}
.ims-gallery-editor-add:hover {
  border-color: var(--ims-primary);
  color: var(--ims-primary);
  background: var(--ims-brand-50);
}
.ims-gallery-editor-add i {
  font-size: 1.5rem;
}

.ims-gallery-editor-empty {
  color: var(--ims-text-faint);
  font-size: var(--ims-text-sm);
  font-style: italic;
  align-self: center;
}

/* ====================================================================
   LIGHTBOX / FULLSCREEN VIEWER (v67 - Galeria Entrega C)
   --------------------------------------------------------------------
   Overlay fullscreen oscuro para mostrar imagenes en tamano grande.
   Toda la pantalla. No se puede mezclar con otros modales abiertos.
   ==================================================================== */

.ims-lightbox {
  position: fixed;
  inset: 0;  /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0, 0, 0, 0.92);
  z-index: 10500;  /* sobre todo, incluso bootstrap modal (1050+) */
  align-items: center;
  justify-content: center;
  padding: 60px 20px 100px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.ims-lightbox.is-open {
  display: flex !important;
  animation: imsLightboxFadeIn 0.2s ease-out;
}

@keyframes imsLightboxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Stage = area donde se renderiza la imagen */
.ims-lightbox-stage {
  flex: 1;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ims-lightbox-stage img {
  max-width: 100%;
  max-height: calc(100vh - 200px);  /* deja espacio arriba y abajo */
  object-fit: contain;
  display: block;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  border-radius: var(--ims-radius-md);
  background: #fff;
  transition: opacity var(--ims-transition);
}

/* Boton cerrar (esquina superior derecha) */
.ims-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: var(--ims-radius-full);
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ims-transition-fast);
  z-index: 2;
}
.ims-lightbox-close:hover {
  background: rgba(255,255,255,0.25);
}

/* Botones de navegacion (flechas a los lados) */
.ims-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: var(--ims-radius-full);
  background: rgba(255,255,255,0.1);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ims-transition-fast);
  z-index: 2;
}
.ims-lightbox-nav:hover:not([disabled]) {
  background: rgba(255,255,255,0.25);
}
.ims-lightbox-nav[disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
.ims-lightbox-prev { left: 16px; }
.ims-lightbox-next { right: 16px; }

/* En movil, los botones flotan mas abajo y mas pequenos */
@media (max-width: 575.98px) {
  .ims-lightbox-prev { left: 8px; }
  .ims-lightbox-next { right: 8px; }
  .ims-lightbox-nav  { width: 40px; height: 40px; font-size: 1.25rem; }
  .ims-lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
}

/* Contador X / N */
.ims-lightbox-counter {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--ims-radius-full);
  font-size: var(--ims-text-sm);
  font-weight: var(--ims-weight-medium);
  z-index: 2;
}

/* Tira de miniaturas abajo */
.ims-lightbox-thumbs {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  max-width: calc(100vw - 32px);
  overflow-x: auto;
  padding: 8px;
  background: rgba(0,0,0,0.5);
  border-radius: var(--ims-radius-md);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.ims-lightbox-thumbs::-webkit-scrollbar {
  height: 6px;
}
.ims-lightbox-thumbs::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
}

.ims-lightbox-thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--ims-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: #fff;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color var(--ims-transition-fast),
              transform var(--ims-transition-fast);
}
.ims-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ims-lightbox-thumb:hover {
  transform: translateY(-2px);
}
.ims-lightbox-thumb.is-active {
  border-color: var(--ims-primary);
}

/* Animacion para los swipes */
.ims-lightbox-stage img.is-changing {
  opacity: 0.3;
}


/* ====================================================================
   INDICADOR "X / N" sobre la imagen grande (sin abrir lightbox)
   --------------------------------------------------------------------
   Pequeno badge en la esquina inferior derecha de la imagen principal.
   Solo aparece cuando hay 2+ imagenes en la galeria.
   Lo agrega imsImageZoom() o cargarGaleriaModal() al detectar items.
   ==================================================================== */
.ims-product-detail-image {
  position: relative;  /* importante: el contador se posiciona respecto a esto */
  cursor: zoom-in;
}

.ims-image-counter {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--ims-radius-full);
  font-size: var(--ims-text-xs);
  font-weight: var(--ims-weight-medium);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 1;
}
.ims-image-counter i {
  font-size: 0.85rem;
}


/* ====================================================================
   ZOOM IN-PLACE (hover desktop) - estilo Apple
   --------------------------------------------------------------------
   Sobre la imagen grande de producto.php y modal del visitante,
   al pasar el mouse en desktop la imagen se aumenta y sigue el cursor.

   Solo activa con hover (no en touch). Se desactiva si el lightbox
   esta abierto.
   ==================================================================== */
@media (hover: hover) and (pointer: fine) {
  .ims-zoom-active {
    overflow: hidden;
  }
  .ims-zoom-active img {
    transition: transform 0.1s ease-out;
    transform-origin: center center;  /* default; el JS lo cambia segun el cursor */
  }
  .ims-zoom-active:hover img {
    transform: scale(2);  /* zoom al 200% */
    cursor: zoom-out;
  }
}

/* ====================================================================
   KPIs adicionales: economicos + rotacion (v69)
   ====================================================================
   Variantes adicionales de .ims-kpi-card para los nuevos KPIs.
   - kpi-info: card neutral (azul suave) para datos informativos
   - kpi-rotacion-top: card naranja (fuego) para top vendidos
   - kpi-rotacion-sin: card gris-azul (frio) para sin movimiento
   ==================================================================== */
.ims-kpi-card.kpi-info {
  border-color: var(--ims-blue-200);
  background: var(--ims-blue-50);
}
.ims-kpi-card.kpi-info .ims-kpi-icon {
  color: var(--ims-blue-700);
}
.ims-kpi-card.kpi-info .ims-kpi-number {
  color: var(--ims-blue-700);
}

.ims-kpi-card.kpi-rotacion-top {
  border-color: var(--ims-amber-200);
}
.ims-kpi-card.kpi-rotacion-top .ims-kpi-icon {
  color: var(--ims-amber-700);
}
.ims-kpi-card.kpi-rotacion-top.is-active {
  background: var(--ims-amber-50);
  border-color: var(--ims-amber-700);
}

.ims-kpi-card.kpi-rotacion-sin {
  border-color: var(--ims-gray-300);
}
.ims-kpi-card.kpi-rotacion-sin .ims-kpi-icon {
  color: var(--ims-gray-600);
}
.ims-kpi-card.kpi-rotacion-sin.is-active {
  background: var(--ims-gray-100);
  border-color: var(--ims-gray-600);
}

/* ====================================================================
   Panel "Atencion requerida" (v69)
   ====================================================================
   Lista compacta de items accionables. Click en cada item filtra
   el catalogo correspondiente.
   ==================================================================== */
.ims-attention-panel {
  background: var(--ims-bg);
  border: 1px solid var(--ims-amber-200);
  border-radius: var(--ims-radius-md);
  overflow: hidden;
}

.ims-attention-header {
  display: flex;
  align-items: center;
  gap: var(--ims-space-2);
  padding: var(--ims-space-3) var(--ims-space-4);
  background: var(--ims-amber-50);
  border: none;
  border-bottom: 1px solid var(--ims-amber-200);
  font-weight: var(--ims-weight-semibold);
  font-size: var(--ims-text-sm);
  color: var(--ims-amber-700);
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--ims-transition-fast);
}
.ims-attention-header:hover {
  background: var(--ims-amber-100, var(--ims-amber-200));
}
.ims-attention-header i:first-child {
  font-size: 1rem;
  flex-shrink: 0;
}
.ims-attention-title {
  flex: 1;
}
.ims-attention-count {
  font-size: var(--ims-text-xs);
  font-weight: var(--ims-weight-medium);
  background: rgba(217, 119, 6, 0.15);
  color: var(--ims-amber-700);
  padding: 2px var(--ims-space-2);
  border-radius: var(--ims-radius-full);
}
/* Chevron rota cuando esta colapsado */
.ims-attention-chevron {
  font-size: 0.85rem;
  transition: transform var(--ims-transition-fast);
  flex-shrink: 0;
}
.ims-attention-header.is-collapsed {
  border-bottom-color: transparent;
}
.ims-attention-header.is-collapsed .ims-attention-chevron {
  transform: rotate(-90deg);
}

.ims-attention-list {
  display: flex;
  flex-direction: column;
}

.ims-attention-item {
  display: flex;
  align-items: center;
  gap: var(--ims-space-3);
  padding: var(--ims-space-3) var(--ims-space-4);
  background: var(--ims-bg);
  border: none;
  border-bottom: 1px solid var(--ims-border);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-size: var(--ims-text-sm);
  color: var(--ims-text);
  transition: background-color var(--ims-transition-fast);
}
.ims-attention-item:hover {
  background: var(--ims-bg-subtle);
}
.ims-attention-item:last-child {
  border-bottom: none;
}
.ims-attention-item i:first-child {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.ims-attention-num {
  font-weight: var(--ims-weight-bold);
  font-size: var(--ims-text-md);
  color: var(--ims-text);
  min-width: 32px;
}
.ims-attention-arrow {
  margin-left: auto;
  color: var(--ims-text-faint);
  font-size: 0.85rem;
  flex-shrink: 0;
}
.ims-attention-item:hover .ims-attention-arrow {
  color: var(--ims-text-mute);
}

/* En movil: items mas compactos */
@media (max-width: 575.98px) {
  .ims-attention-item {
    padding: var(--ims-space-2) var(--ims-space-3);
    font-size: var(--ims-text-xs);
  }
  .ims-attention-num {
    min-width: 28px;
  }
}