/**
 * ==========================================================
 * SIDV Theme
 * ----------------------------------------------------------
 * Component: Products Toolbar
 * ----------------------------------------------------------
 * Estilos para la barra de herramientas del catálogo.
 * Soporta distribución en 3 zonas (izquierda, centro, derecha),
 * botón de activación de filtros móviles/drawer, integración
 * de tokens de diseño y comportamiento responsivo fluido.
 * ==========================================================
 */

:root {
  --sidv-toolbar-bg: var(--sidv-color-surface, #FFFFFF);
  --sidv-toolbar-border: var(--sidv-color-border-subtle, #E8EDF3);
  --sidv-toolbar-radius: var(--sidv-radius-xl, 22px);
  --sidv-toolbar-shadow: 0 12px 35px rgba(13, 33, 55, 0.05);
  --sidv-toolbar-padding: 1.25rem 1.75rem;
  --sidv-toolbar-margin-bottom: 2.5rem;
}

/* ==========================================================
   1. CONTENEDOR PRINCIPAL
   ========================================================== */

.sidv-products-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: var(--sidv-toolbar-padding);
  margin-bottom: var(--sidv-toolbar-margin-bottom);
  background-color: var(--sidv-toolbar-bg);
  border: 1px solid var(--sidv-toolbar-border);
  border-radius: var(--sidv-toolbar-radius);
  box-shadow: var(--sidv-toolbar-shadow);
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}

/* Estado visual durante llamadas AJAX del catálogo */
.sidv-products-toolbar.is-loading,
.sidv-products-toolbar[aria-busy="true"] {
  opacity: 0.65;
  pointer-events: none;
}

/* ==========================================================
   2. DISTRIBUCIÓN DE ZONAS
   ========================================================== */

.sidv-products-toolbar__left,
.sidv-products-toolbar__center,
.sidv-products-toolbar__right {
  display: flex;
  align-items: center;
}

.sidv-products-toolbar__left {
  flex: 0 0 auto;
  gap: 1rem;
}

.sidv-products-toolbar__center {
  flex: 1;
  justify-content: center;
  min-width: 240px;
}

.sidv-products-toolbar__right {
  flex: 0 0 auto;
  gap: 1rem;
}

/* ==========================================================
   3. BOTÓN TOGGLE DE FILTROS (MOBILE / OFF-CANVAS)
   ========================================================== */

.sidv-products-toolbar__filter-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--sidv-color-border, #E2E8F0);
  border-radius: var(--sidv-radius-lg, 12px);
  background-color: var(--sidv-color-surface-alt, #F8FAFC);
  color: var(--sidv-color-primary, #0D2137);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
}

.sidv-products-toolbar__filter-toggle .sidv-icon,
.sidv-products-toolbar__filter-toggle svg {
  width: 1.125em;
  height: 1.125em;
  fill: currentColor;
  flex-shrink: 0;
}

.sidv-products-toolbar__filter-toggle:hover {
  background-color: var(--sidv-color-primary, #0D2137);
  border-color: var(--sidv-color-primary, #0D2137);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(13, 33, 55, 0.15);
}

.sidv-products-toolbar__filter-toggle[aria-expanded="true"] {
  background-color: var(--sidv-color-accent, #FF9800);
  border-color: var(--sidv-color-accent, #FF9800);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.25);
}

.sidv-products-toolbar__filter-toggle:focus-visible {
  outline: 2px solid var(--sidv-color-accent, #FF9800);
  outline-offset: 2px;
}

.sidv-products-toolbar__filter-toggle:active {
  transform: scale(0.96);
}

/* ==========================================================
   4. BÚSQUEDA INTEGRADA EN TOOLBAR
   ========================================================== */

.sidv-search-toolbar {
  width: 100%;
  max-width: 360px;
}

/* ==========================================================
   5. RESPONSIVE DESIGN
   ========================================================== */

@media (max-width: 1100px) {
  .sidv-products-toolbar {
    flex-wrap: wrap;
    gap: 1.25rem;
  }

  .sidv-products-toolbar__left {
    order: 1;
  }

  .sidv-products-toolbar__right {
    order: 2;
    margin-left: auto;
  }

  .sidv-products-toolbar__center {
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
    justify-content: stretch;
  }

  .sidv-search-toolbar {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  :root {
    --sidv-toolbar-padding: 1rem 1.25rem;
    --sidv-toolbar-margin-bottom: 1.75rem;
  }

  .sidv-products-toolbar {
    gap: 1rem;
  }

  .sidv-products-toolbar__left {
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .sidv-products-toolbar__right {
    flex: 0 0 auto;
    margin-left: 0;
    gap: 0.5rem;
  }

  .sidv-products-toolbar__filter-toggle span {
    display: inline;
  }
}

@media (max-width: 480px) {
  .sidv-products-toolbar__left,
  .sidv-products-toolbar__right {
    flex: 0 0 100%;
    justify-content: space-between;
  }
}