/* ==========================================================================
   PROSERMAT — Premium Catalog Filters 2026
   --------------------------------------------------------------------------
   FASE 2 · Sidebar de filtros en desktop ≥1024px + drawer lateral en mobile.

   Estructura objetivo (catalog.php):
     <div class="cat-layout">
       <aside class="cat-sidebar" id="cat-sidebar"> ... </aside>
       <div class="cat-main"> ... </div>
     </div>

   Cada filtro es un <details class="cat-filter"> colapsable con summary
   estilizado y checkboxes/chips custom verdes brand.

   En mobile (<1024px) la sidebar deja de ser grid-col y se convierte en
   drawer lateral toggable con `#btn-filter-mobile`.
   ========================================================================== */

/* ── 1 · LAYOUT principal del catálogo (sidebar + main) ───────────────── */
.cat-layout {
  display: block; /* fallback mobile-first */
  max-width: var(--container-xl, 1240px);
  margin: 0 auto;
  padding: 0 var(--container-gutter, 24px);
  gap: var(--space-8, 32px);
}

@media (min-width: 1024px) {
  .cat-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }
}

/* ── 2 · SIDEBAR sticky (desktop) ─────────────────────────────────────── */
.cat-sidebar {
  position: relative;
  background: var(--surface-card, #fff);
  border: 1px solid color-mix(in srgb, var(--color-brand-900, #0f4529) 8%, transparent);
  border-radius: var(--radius-xl, 16px);
  padding: var(--space-5, 20px);
  box-shadow: var(--shadow-sm, 0 2px 4px rgba(15, 23, 42, .06));
}

@media (min-width: 1024px) {
  .cat-sidebar {
    position: sticky;
    top: calc(var(--header-height, 72px) + var(--space-4, 16px));
    max-height: calc(100vh - var(--header-height, 72px) - var(--space-8, 32px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Scrollbar fino para sidebar sticky */
  .cat-sidebar::-webkit-scrollbar { width: 6px; }
  .cat-sidebar::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--color-brand-900, #0f4529) 18%, transparent);
    border-radius: var(--radius-pill, 999px);
  }
}

.cat-sidebar__title {
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider, .08em);
  color: var(--color-brand-700, #1a7344);
  margin: 0 0 var(--space-3, 12px);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── 3 · MAIN column ──────────────────────────────────────────────────── */
.cat-main {
  min-width: 0; /* permite que grids dentro respeten el ancho */
}

/* ── 4 · Cada filtro como <details> colapsable ────────────────────────── */
.cat-filter {
  border-top: 1px solid color-mix(in srgb, var(--color-brand-900, #0f4529) 8%, transparent);
  padding: var(--space-4, 16px) 0;
}
.cat-filter:first-of-type { border-top: 0; padding-top: 0; }
.cat-filter:last-of-type  { padding-bottom: 0; }

.cat-filter > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-neutral-900, #1a1a17);
  padding: 4px 0;
  user-select: none;
}
.cat-filter > summary::-webkit-details-marker,
.cat-filter > summary::marker { display: none; content: ""; }

.cat-filter > summary::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-neutral-500, #6b6b62);
  border-bottom: 2px solid var(--color-neutral-500, #6b6b62);
  transform: rotate(45deg);
  transition: transform var(--duration-fast, 150ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  margin-right: 4px;
  margin-top: -4px;
}
.cat-filter[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.cat-filter > summary:hover {
  color: var(--color-brand-700, #1a7344);
}
.cat-filter > summary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(31, 122, 77, .35));
  border-radius: var(--radius-sm, 4px);
}

.cat-filter__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: var(--space-3, 12px);
}

/* ── 5 · CHIPS dentro del filtro (líneas, categorías) ─────────────────── */
.cat-filter__chips {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: var(--space-3, 12px);
}
.cat-filter__chips .filter-chip,
.cat-filter__chips .subcat-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid transparent;
  background: transparent;
  font-size: .87rem;
  font-weight: 600;
  color: var(--color-neutral-700, #3a3a35);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  width: 100%;
  transition: all var(--duration-fast, 150ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.cat-filter__chips .filter-chip:hover,
.cat-filter__chips .subcat-chip:hover {
  background: var(--color-brand-50, #edfaf3);
  color: var(--color-brand-700, #1a7344);
}
.cat-filter__chips .filter-chip.active,
.cat-filter__chips .subcat-chip.active {
  background: var(--color-brand-600, #1f7a4d);
  color: #fff;
  box-shadow: var(--shadow-brand-sm, 0 4px 10px rgba(31, 122, 77, .22));
}
.cat-filter__chips .filter-chip.active .chip-count,
.cat-filter__chips .subcat-chip.active .subcat-chip-count {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
.cat-filter__chips .chip-count,
.cat-filter__chips .subcat-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: var(--radius-pill, 999px);
  font-size: .7rem;
  font-weight: 700;
  background: var(--color-neutral-100, #f2f2ee);
  color: var(--color-neutral-700, #3a3a35);
}

/* ── 6 · CHECKBOXES custom verdes brand ───────────────────────────────── */
.cat-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-size: .87rem;
  color: var(--color-neutral-700, #3a3a35);
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-sm, 4px);
}
.cat-check:hover { color: var(--color-brand-700, #1a7344); }
.cat-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--color-brand-900, #0f4529) 22%, transparent);
  border-radius: var(--radius-xs, 2px);
  background: #fff;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--duration-fast, 150ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.cat-check input[type="checkbox"]::before {
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform var(--duration-fast, 150ms) var(--ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
  box-shadow: inset 1em 1em #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.cat-check input[type="checkbox"]:checked {
  background: var(--color-brand-600, #1f7a4d);
  border-color: var(--color-brand-600, #1f7a4d);
}
.cat-check input[type="checkbox"]:checked::before { transform: scale(1); }
.cat-check input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(31, 122, 77, .35));
}

/* ── 7 · BOTÓN mobile para abrir drawer ───────────────────────────────── */
#btn-filter-mobile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-lg, 12px);
  border: 1.5px solid color-mix(in srgb, var(--color-brand-900, #0f4529) 12%, transparent);
  background: #fff;
  color: var(--color-brand-700, #1a7344);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, .04));
  transition: all var(--duration-fast, 150ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
#btn-filter-mobile:hover {
  background: var(--color-brand-50, #edfaf3);
  border-color: color-mix(in srgb, var(--color-brand-500, #22a05e) 35%, transparent);
}
#btn-filter-mobile svg { flex-shrink: 0; }

/* En desktop el botón mobile desaparece (sidebar visible) */
@media (min-width: 1024px) {
  #btn-filter-mobile { display: none !important; }
}

/* ── 8 · DRAWER mobile (sidebar transformada) ─────────────────────────── */
@media (max-width: 1023.98px) {
  .cat-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 360px);
    max-height: 100vh;
    overflow-y: auto;
    z-index: var(--z-drawer, 800);
    border-radius: 0 var(--radius-2xl, 20px) var(--radius-2xl, 20px) 0;
    transform: translateX(-100%);
    transition: transform var(--duration-base, 220ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    box-shadow: 0 24px 48px rgba(15, 23, 42, .28);
    padding-top: calc(var(--space-12, 48px) + var(--space-2, 8px));
  }
  .cat-sidebar.is-open {
    transform: translateX(0);
  }
  /* Backdrop (creado por CSS sin tocar HTML/JS) */
  .cat-sidebar.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .42);
    z-index: -1;
  }
  /* Header del drawer con cerrar */
  .cat-sidebar__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full, 50%);
    border: 0;
    background: var(--color-neutral-100, #f2f2ee);
    color: var(--color-neutral-700, #3a3a35);
    font-size: 1.1rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cat-sidebar__close:hover {
    background: var(--color-neutral-300, #b4b4a8);
    color: var(--color-neutral-900, #1a1a17);
  }
}

/* En desktop el botón de cerrar drawer no se ve */
@media (min-width: 1024px) {
  .cat-sidebar__close { display: none; }
}

/* ── 9 · MICRO drawer auto-toggle (no requiere JS extra) ──────────────── */
/* Habilita apertura/cierre cuando el botón añade aria-expanded="true". */
@media (max-width: 1023.98px) {
  #btn-filter-mobile[aria-expanded="true"] ~ .cat-layout .cat-sidebar,
  .cat-layout:has(#btn-filter-mobile[aria-expanded="true"]) .cat-sidebar {
    transform: translateX(0);
  }
}

/* ── 10 · A11Y · reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cat-sidebar, .cat-filter > summary::after,
  .cat-check input[type="checkbox"]::before,
  .cat-filter__chips .filter-chip,
  .cat-filter__chips .subcat-chip {
    transition: none !important;
  }
}