/* ================================================================
   MAFE — categoria.css
   CSS específico de las páginas de categoría (categoria-*.html).
   NO se toca css/styles.css desde acá — pero como styles.css ya
   adoptó la misma línea de diseño de punta a punta (píldoras, sombra
   en vez de borde, --radius-pill, acento rojo unificado), la mayoría
   de lo que este archivo hacía como "override acotado a esta página"
   ya es redundante y se sacó. Lo que queda es lo genuinamente único
   de esta página: el banner de prueba, el hero de categoría, y el
   menú lateral con su acordeón de subcategorías (styles.css no sabe
   nada de subcategorías).
   ================================================================ */

/* ── Banner fijo de categoría ─────────────────────────────────────────
   Reemplaza a .cat-banner (el carrusel genérico, definido en styles.css)
   en categoria-*.html cuando categorias/{ID}.tieneBanner === true (ver
   aplicarBannerCategoria() en catalogo.js), y aparece directo (sin
   carrusel de respaldo) en producto.html cuando la categoría del
   producto tiene banner (ver aplicarBannerCategoria() en producto.js).
   Mismo criterio de tamaño que .cat-banner__slide-img: sin recorte por
   CSS, el aspect ratio lo da el archivo real (1920×420 desktop). */
.cat-banner-fijo {
  display: block;
  width: 100%;
  margin-top: var(--nav-h);
}
.cat-banner-fijo img {
  width: 100%;
  height: auto;
  display: block;
}

/* .cat-banner arranca oculto (visibility:hidden en el <style> crítico
   inline de cada categoria-*.html) hasta que catalogo.js sepa si
   corresponde dejarlo o reemplazarlo por .cat-banner-fijo — ver
   revelarBanner() en catalogo.js. El espacio queda reservado igual
   (visibility, no display:none), así no salta el layout de abajo. */
.cat-banner.cat-banner--listo { visibility: visible; }

/* ── Layout general: sidebar + contenido ─────────────────────────── */
.categoria-layout__inner {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding: 32px 0 64px;
  position: relative;
}
/* Nota: no hace falta flex-direction:column a mobile acá — el sidebar
   (#cat-menu-sidebar) vuelve a ser display:none puro a mobile (regla
   original de styles.css, sin overrides), así que .catalogo-main queda
   como único hijo en flujo y ocupa el 100% del ancho solo. La navegación
   mobile (chips) vive afuera de este contenedor, en .cat-mobile-nav. */

/* Los 32px de arriba son el respiro entre .cat-filterbar y el contenido
   cuando #cat-mobile-nav está en display:none (desktop, ≥900px) — ahí
   es el ÚNICO aire antes del breadcrumb/sidebar, tiene sentido dejarlo.
   En mobile #cat-mobile-nav SÍ está visible (chips + botón "Filtros") y
   ya aporta su propio quiebre visual antes de esto — sumarle encima
   este mismo padding (más el de .cat-content-wrap, ver styles.css)
   duplicaba el respiro y dejaba ~84px de space vacío entre "Filtros" y
   el breadcrumb. Ver también .catalogo-main, que sí conserva su
   padding-top acá — con ese solo alcanza para separar del breadcrumb. */
@media (max-width: 899px) {
  .categoria-layout__inner { padding-top: 0; }
}

/* ── Menú de categorías madre: estado "próximamente" (disabled) ───── */
.cat-btn--proximamente {
  cursor: default;
  opacity: .55;
}
.cat-btn--proximamente:hover { background: transparent; color: var(--gris-80); }
.cat-btn--proximamente .cat-count {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  /* Es texto ("Próximamente"), no un número — el ancho fijo de
     .cat-btn .cat-count (pensado para 1-3 dígitos) lo apretaría. */
  width: auto;
  padding: 2px 8px;
}

/* ── Navegación mobile: chips horizontales (reemplaza el dropdown) ──
   Estilo Mercado Libre: categorías madre siempre visibles en una fila
   scrolleable, subcategorías de la categoría activa en una segunda fila
   (si tiene 2+ con productos), y los filtros secundarios (ofertas +
   orden) agrupados en un botón "Filtros" con panel chico. Oculto en
   desktop — ahí sigue el sidebar de siempre, sin cambios. Rediseño
   2026-08-06, reemplaza el drawer/dropdown de rondas anteriores. */
.cat-mobile-nav { display: none; }

@media (max-width: 899px) {
  .cat-mobile-nav {
    display: block;
    padding: 12px 0 4px;
  }

  .cat-chips-row,
  .cat-subchips-row {
    display: flex; gap: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 2px 20px 10px;
    scrollbar-width: none;
  }
  .cat-chips-row::-webkit-scrollbar { display: none; }

  /* Degradado a la derecha: única pista de que la fila sigue y hay que
     deslizar — sin esto el último chip visible queda cortado a mitad de
     palabra y se lee como roto, no como "hay más". catalogo.js prende
     esta clase solo cuando scrollWidth-clientWidth-scrollLeft > 0 (hay
     contenido real para scrollear) y la saca al llegar al final. Solo
     aplica a la fila de categorías madre — las subcategorías ahora viven
     dentro de #filtros-panel (ver .filtros-panel__subcats más abajo),
     que no scrollea horizontal, así que no necesitan este fade. */
  .cat-chips-row.cat-fade-right {
    /* 32px probado y descartado: en un chip claro sobre fondo casi del
       mismo color, el degradado quedaba imperceptible (confirmado con
       capturas reales, no solo en teoría). 64px es el punto medio entre
       eso y una prueba de 80px que sí se notaba con claridad. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
  }

  .cat-chip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
    padding: 0 16px; min-height: 40px;
    border: 2px solid var(--gris-20); border-radius: var(--radius-pill);
    background: var(--blanco); color: var(--gris-80);
    font-size: .85rem; font-weight: 600; white-space: nowrap;
    transition: background var(--trans), border-color var(--trans), color var(--trans);
  }
  .cat-chip.active {
    background: var(--rojo); border-color: var(--rojo); color: var(--blanco);
  }

  /* Subchips: mismo componente, un escalón más chico — son un nivel
     secundario de la jerarquía (subcategoría de la categoría activa). */
  .cat-chip--sub {
    min-height: 34px; padding: 0 13px; font-size: .78rem;
    border-color: var(--gris-10); background: var(--gris-05);
  }
  .cat-chip--sub.active { background: var(--rojo); border-color: var(--rojo); color: var(--blanco); }

  .cat-chip__count {
    font-size: .68rem; font-weight: 700;
    background: var(--gris-10); color: var(--gris-60);
    padding: 1px 6px; border-radius: var(--radius-pill);
  }
  .cat-chip.active .cat-chip__count,
  .cat-chip--sub.active .cat-chip__count { background: rgba(255,255,255,.25); color: var(--blanco); }

  /* Botón "Filtros" + panel chico (ofertas + orden + limpiar) — misma
     técnica de max-height que ya usa .cat-submenu, sin inventar un
     patrón nuevo. Sin overlay: el panel empuja el contenido de abajo
     (igual que el dropdown de categorías que reemplazamos), y un click
     afuera lo cierra vía listener en JS, no vía una capa visual. */
  .btn-filtros-toggle {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 20px 0;
    background: var(--blanco); border: 2px solid var(--gris-20);
    color: var(--gris-80); font-weight: 600; font-size: .85rem;
    padding: 9px 18px; min-height: 44px; border-radius: var(--radius-pill);
  }
  .btn-filtros-toggle:hover { border-color: var(--rojo); color: var(--rojo); }
  .btn-filtros-toggle[aria-expanded="true"] { border-color: var(--rojo); background: var(--rojo-lt); color: var(--rojo-dk); }

  .filtros-panel {
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease;
    margin: 0 20px;
  }
  .filtros-panel.open {
    /* 260px alcanzaba cuando el panel solo tenía ofertas+orden+limpiar.
       Con las subcategorías adentro (hasta 8-9 chips en categorías
       grandes) hace falta más techo — es un máximo, no un alto fijo, así
       que en paneles con menos contenido no deja hueco vacío. */
    max-height: 520px;
    margin-top: 14px;
  }
  .filtros-panel .filterbar-check { font-size: .85rem; margin-bottom: 16px; }
  .filtros-panel .sort-wrap { flex-direction: column; align-items: stretch; gap: 7px; margin-bottom: 16px; }
  .filtros-panel .sort-dropdown { width: 100%; }
  .filtros-panel .btn-limpiar-fb { width: 100%; justify-content: center; height: 38px; font-size: .8rem; }

  /* Subcategorías dentro de "Filtros" — antes era #cat-subchips-row, una
     fila propia con scroll horizontal. Acá adentro el panel ya es una
     lista vertical (checkbox, orden, limpiar), así que los chips van en
     wrap (varias líneas) en vez de scroll — no tendría sentido un
     scroll horizontal metido dentro de un panel que ya scrollea/crece
     vertical. Vacío (sin label ni chips) cuando renderChipsMobile() no
     tiene subcategorías para mostrar — mismo criterio que tenía la fila. */
  .filtros-panel__subcats:empty { display: none; }
  .filtros-panel__subcats-label {
    font-size: .78rem; font-weight: 700; color: var(--gris-60);
    text-transform: uppercase; letter-spacing: .4px;
    margin-bottom: 10px;
  }
  .filtros-panel__subcats-list {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 18px;
  }
}
@media (min-width: 900px) {
  .cat-mobile-nav { display: none !important; }
}

/* ── Miga de pan ──────────────────────────────────────────────────── */
.breadcrumb {
  font-size: .8rem; color: var(--gris-60);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.breadcrumb a:hover { color: var(--rojo); }
.breadcrumb span[aria-current] { color: var(--texto); font-weight: 600; }

/* ── Encabezado de categoría ──────────────────────────────────────── */
.categoria-hero { margin-bottom: 44px; }
.categoria-hero__eyebrow {
  display: inline-flex; align-items: center;
  background: var(--rojo-lt); color: var(--rojo);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 5px 14px; border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.categoria-hero h1 {
  font-size: 2.75rem; font-weight: 800; color: var(--texto);
  line-height: 1.08; letter-spacing: -.5px;
  margin-bottom: 14px;
}
.categoria-hero__desc {
  font-size: 1.05rem; color: var(--texto-sec); max-width: 640px; line-height: 1.7;
}

@media (max-width: 899px) {
  .categoria-hero h1 { font-size: 2.1rem; }
}
@media (max-width: 767px) {
  .categoria-hero { margin-bottom: 32px; }
  .categoria-hero h1 { font-size: 1.7rem; letter-spacing: -.3px; }
  .categoria-hero__desc { font-size: .95rem; }
}

/* ── Acordeón de subcategorías (hover desktop / click mobile) ──────
   styles.css no sabe nada de subcategorías — todo esto es propio de
   esta página. Se expande "en línea" dentro del sidebar (no como
   flyout flotante) porque .cat-sidebar tiene overflow-y:auto, y un
   hijo position:absolute que se saliera del ancho quedaría recortado
   por ese mismo scroll. */
.cat-menu-item { position: relative; }
.cat-menu-item__chevron {
  margin-left: auto; font-size: .7rem; color: var(--gris-40);
  transition: transform var(--trans);
  flex-shrink: 0;
}
.cat-menu-item.open .cat-menu-item__chevron { transform: rotate(90deg); }
/* En catalogo.html las filas de categoría madre traen badge de cantidad
   ANTES de la flecha — con los dos usando margin-left:auto competían por
   el mismo espacio libre y quedaban descuadrados. El badge (ancho fijo,
   ver .cat-btn .cat-count en styles.css) ya empuja todo a la derecha; acá
   la flecha solo necesita un margen chico y fijo después de él. */
.cat-count + .cat-menu-item__chevron { margin-left: 8px; }

/* Sin padding acá a propósito: con max-height:0 + overflow:hidden, un
   padding en este mismo elemento no se comprime a 0 (limitación conocida
   de CSS en acordeones animados por max-height) y deja un resquicio
   visible aunque el contenido esté "cerrado". El espaciado de cada ítem
   ya lo da su propio margin (.cat-submenu__item), así que no hace falta
   acá. Fondo levemente distinto al del sidebar para que el panel
   desplegado se lea como una unidad propia, sin necesidad de una línea. */
.cat-submenu {
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease;
  background: var(--gris-05);
}
.cat-menu-item.has-submenu:hover .cat-submenu,
.cat-menu-item.has-submenu.open .cat-submenu {
  max-height: 700px; /* generoso: cubre las 17 subcategorías de Quesos */
}

.cat-submenu__item {
  display: flex; align-items: center;
  margin: 2px 10px 2px 30px;
  width: calc(100% - 40px);
  text-align: left; padding: 9px 14px;
  font-size: .8rem; color: var(--gris-80);
  border-radius: var(--radius);
  transition: background var(--trans), color var(--trans);
}
.cat-submenu__item:hover { background: var(--rojo-lt); color: var(--rojo); }
.cat-submenu__item.active {
  background: var(--rojo); color: var(--blanco); font-weight: 700;
}

.cat-submenu__count {
  margin-left: auto; font-size: .68rem; font-weight: 700;
  background: var(--gris-10); color: var(--gris-60);
  padding: 1px 4px; border-radius: var(--radius-pill);
  width: 26px; text-align: center; flex-shrink: 0;
}
.cat-submenu__item.active .cat-submenu__count { background: var(--blanco); color: var(--rojo-dk); }

/* ── Filtros adicionales (ofertas + orden) dentro de la columna del
   sidebar, debajo del menú de categorías. Reutiliza los componentes que
   ya existen (.filterbar-check, .sort-select) sin redefinirlos — esto
   solo los apila prolijamente en la columna angosta en vez del layout
   horizontal que tenían en la barra de filtros. Usado en catalogo.html. */
.cat-sidebar__filtros {
  padding: 4px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cat-sidebar__filtros-title {
  font-size: .7rem; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gris-40);
}
.cat-sidebar__filtros .filterbar-check {
  font-size: .85rem;
}
.cat-sidebar__filtros .sort-wrap {
  flex-direction: column; align-items: stretch; gap: 7px;
}
.cat-sidebar__filtros .sort-select,
.cat-sidebar__filtros .sort-dropdown {
  width: 100%;
}
.cat-sidebar__filtros .btn-limpiar-fb {
  width: 100%;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  font-size: .8rem;
}