/**
 * responsive-matrix.css
 * Gestiona la visibilidad de las vistas de escritorio y móvil.
 */

/* Por defecto, la vista móvil y sus componentes están ocultos */
.mobile-matrix-view,
.mobile-only {
  display: none;
}

/* --- Estilos para el Acordeón de Producto (Desktop) --- */
.abaca-b2b-product-block.accordion-item .product-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}
.abaca-b2b-product-block.accordion-item.expanded .product-content {
  max-height: 10000px; /* Suficientemente grande */
  opacity: 1;
  padding-top: 20px;
  padding-bottom: 20px;
}
.abaca-b2b-product-block.accordion-item.expanded .accordion-icon svg {
  transform: rotate(180deg);
}
.abaca-b2b-product-block.accordion-item .accordion-icon {
  transition: transform 0.3s ease;
}

/* Forzar visibilidad para el modo table_only */
.product-content.force-visible-on-load {
  max-height: 10000px !important;
  opacity: 1 !important;
  overflow: visible !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --- Estilos Responsivos --- */
@media (max-width: 768px) {
  /* Ocultar la vista de escritorio en móvil */
  .desktop-matrix-view,
  .desktop-only {
    display: none !important;
  }
  /* Mostrar la vista móvil */
  .mobile-matrix-view,
  .mobile-only {
    display: block !important;
  }
}

/* Estilos específicos del acordeón móvil */
.color-section-mobile .color-content-mobile {
  display: none; /* Oculto por defecto */
}
/* Forzar la visibilidad si tiene la clase .show (para table_only) */
.color-section-mobile .color-content-mobile.show {
    display: block !important;
}
.color-section-mobile.expanded .color-content-mobile {
  display: block;
}
.color-section-mobile.expanded .expand-icon-mobile {
    transform: rotate(180deg);
}
.color-header-mobile {
    cursor: pointer;
}
.expand-icon-mobile {
    transition: transform 0.3s ease;
}