/* ==========================================================================
   PreventGas — productos.css
   Cabecera del catálogo, barra de filtros pegajosa, buscador y grilla.
   También la viste la página de gases (enlace de retorno y cabecera).

   La cabecera está pensada para que a 1440×800 entren título, filtros y la
   primera fila de tarjetas en una sola pantalla: nada de migas, eyebrow ni
   párrafos; el total de equipos es un dato en mono al lado del título.
   ========================================================================== */

/* -------------------------------------------------- enlace de retorno
   Reemplaza a las migas: una flecha y una palabra, separadas. */
.volver {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 1.1rem 0 .7rem;
  font: 500 var(--fs-small)/1 var(--body); color: var(--muted);
  transition: color .2s var(--ease);
}
.volver svg { width: 14px; height: 14px; fill: currentColor; flex: none; transition: transform .2s var(--ease); }

/* -------------------------------------------------- cabecera */
.cat__head { padding: .75rem 0 clamp(1.5rem, 4vw, 2.5rem); border-bottom: 1px solid var(--border); }
.cat__title { margin-bottom: .9rem; }
.cat__lead { margin: 0; }

/* La del catálogo: grilla de dos columnas. A la izquierda el título con el
   total y, debajo, la bajada en una línea; a la derecha el PDF y la nota. */
.cat__head--catalogo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "titulo aside" "lead aside";
  column-gap: 2.5rem; row-gap: .55rem;
  align-items: end;
  padding: .2rem 0 1.25rem;
  border-bottom: 0;
}
.cat__titulo { grid-area: titulo; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.1rem; }
.cat__h1 {
  margin: 0;
  font: 700 clamp(1.9rem, 3.4vw, 2.75rem)/1 var(--head);
  letter-spacing: .01em; text-transform: uppercase; color: var(--ink);
}
/* El total en mono, con una marca de escala: es el único dato vivo de la
   cabecera (products.js lo reescribe al filtrar: "15 de 50 equipos"). */
.cat__total {
  display: inline-flex; align-items: baseline; gap: .55rem;
  font: 500 var(--fs-small)/1 var(--mono);
  letter-spacing: .02em; color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cat__total::before { content: ''; width: 3px; height: .95em; background: var(--accent); align-self: center; }
.cat__head--catalogo .cat__lead {
  grid-area: lead; margin: 0;
  font-size: 1.05rem; color: var(--muted);
  max-width: none;
}
.cat__aside { grid-area: aside; display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; text-align: right; }
.cat__pdf {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem .95rem;
  border: 1.5px solid var(--border-2); border-radius: var(--radius);
  font: 600 var(--fs-micro)/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.cat__pdf svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.cat__nota { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.cat__nota a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent); }

/* -------------------------------------------------- barra de filtros
   Pegajosa debajo del nav (main.js escribe --nav-stuck con el alto real).
   Con scroll-state queries el bloque interior gana una sombra cuando queda
   pegado; donde no hay soporte queda el borde inferior, que alcanza.
   z-index: por encima del WhatsApp flotante (90) y por debajo del nav (100)
   y del modal (150). */
.filtros {
  position: sticky; top: var(--nav-stuck, 108px); z-index: 96;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  container-type: scroll-state; container-name: filtros;
}
main { overflow-anchor: none; }
.filtros__inner {
  display: flex; align-items: center; gap: .6rem 1.25rem;
  padding-block: .7rem;
  box-shadow: 0 8px 18px -12px rgba(20,18,16,0);
  transition: box-shadow .25s var(--ease);
}
@container filtros scroll-state(stuck: top) {
  .filtros__inner { box-shadow: 0 8px 18px -12px rgba(20,18,16,.28); }
}

/* Las categorías no se encogen: si falta lugar cede el buscador. */
.filtros__cats { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1 0 auto; }
.filtros__ctrl { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex: 0 1 auto; min-width: 0; }
.filtros__ctrl .select { flex: none; }

/* Categorías: un carril de superficie con chips que se sienten como un
   control segmentado. La activa se llena de tinta con una transición corta,
   el número va como badge y al presionar hay una respuesta táctil (escala). */
.filtros__cats {
  padding: .25rem; gap: .2rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
}
.tab {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .7rem;
  border: 1px solid transparent; border-radius: var(--radius);
  background: transparent;
  font: 600 .8125rem/1 var(--body); letter-spacing: .02em; color: var(--fg);
  white-space: nowrap; cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.tab:active { transform: scale(.96); }
.tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.tab[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: 0 1px 2px rgba(20,18,16,.25); }
.tab .n {
  padding: .18rem .38rem; border-radius: 999px;
  background: rgba(20,18,16,.08);
  font: 600 .66rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--muted);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.tab[aria-pressed="true"] .n { background: var(--accent); color: var(--ink); }

/* Selects: caja clara, flecha que gira al enfocar, anillo amarillo, y
   cuando tienen un valor elegido lo muestran con borde de tinta. */
.select {
  padding: .55rem 2rem .55rem .75rem;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141210' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .75rem center;
  -webkit-appearance: none; appearance: none;
  font: 500 .8125rem/1 var(--body); color: var(--fg); cursor: pointer;
  max-width: 100%;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.select:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(245,196,0,.35); }
.select:has(option:checked:not([value=""])) { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

/* Buscador: crece al enfocar y muestra la cruz nativa para vaciarlo. */
.buscador { position: relative; flex: 1 1 170px; min-width: 120px; max-width: 220px; transition: max-width .25s var(--ease); }
.buscador:focus-within { max-width: 300px; }
.buscador input {
  width: 100%; padding: .55rem .75rem .55rem 2.1rem;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--card); font-size: .8125rem; color: var(--fg);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.buscador input::placeholder { color: var(--muted); }
.buscador input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(245,196,0,.35); }
.buscador input:not(:placeholder-shown) { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.buscador svg { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; fill: var(--muted); pointer-events: none; transition: fill .18s var(--ease); }
.buscador:focus-within svg { fill: var(--ink); }

/* "Limpiar filtros" solo existe cuando hay algo que limpiar. Se resuelve en
   CSS con :has() leyendo el estado real de los controles (chip activo que no
   es "Todos", un select fuera de su primera opción o texto en el buscador);
   products.js sigue manejando el clic. Sin :has(), el botón queda visible. */
.filtros__limpiar {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .65rem;
  border: 1px solid transparent; border-radius: var(--radius);
  background: transparent;
  font: 600 var(--fs-micro)/1 var(--body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; flex: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.filtros__limpiar svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
/* En escritorio ancho la barra va en una sola fila, y en móvil el botón
   comparte fila con el buscador: en los dos casos entra como ícono (el nombre
   lo dan aria-label y title). En los anchos intermedios, con la barra en dos
   filas, vuelve el texto. */
@media (min-width: 1181px), (max-width: 720px) {
  .filtros__limpiar span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .filtros__limpiar { position: relative; padding: .55rem; border-color: var(--border-2); }
  .filtros__limpiar svg { width: 13px; height: 13px; }
}
@supports selector(:has(a)) {
  .filtros__limpiar { display: none; }
  .filtros:has([data-cat]:not([data-cat=""])[aria-pressed="true"]) .filtros__limpiar,
  .filtros:has(select option:checked:not([value=""])) .filtros__limpiar,
  .filtros:has(input[type="search"]:not(:placeholder-shown)) .filtros__limpiar { display: inline-flex; }
}

/* Hasta que la barra tenga lugar para una sola fila, las categorías y los
   controles se apilan; la barra sigue pegajosa. */
@media (max-width: 1180px) {
  .filtros__inner { flex-wrap: wrap; }
  .filtros__cats { flex: 1 1 100%; }
  .filtros__ctrl { margin-left: 0; flex: 1 1 100%; }
  .buscador { flex: 1 1 200px; max-width: none; }
}

/* ── Móvil: chips en una tira con scroll horizontal y snap; selects y
   buscador apilados. La tira tiene un fundido en el borde derecho que se
   apaga sola cuando llega al final, gracias a una línea de tiempo de scroll;
   sin soporte, el fundido queda fijo y el relleno final evita tapar el último
   chip. ───────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .cat__head--catalogo {
    grid-template-columns: 1fr;
    grid-template-areas: "titulo" "lead" "aside";
    row-gap: .7rem; padding-bottom: .9rem;
  }
  .volver { padding: .8rem 0 .4rem; }
  .cat__title br { display: none; }   /* el corte del título de gases es de escritorio */
  .cat__aside { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: .6rem 1rem; }
  .cat__head--catalogo .cat__lead { font-size: .95rem; }

  .filtros__inner { gap: .55rem; padding-block: .55rem; }
  .filtros__cats {
    flex-wrap: nowrap; gap: .35rem;
    flex: 1 1 100%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(-1 * clamp(1.15rem, 4vw, 2.75rem));
    padding-inline: clamp(1.15rem, 4vw, 2.75rem) 3rem;
    scroll-padding-inline: clamp(1.15rem, 4vw, 2.75rem);
    scroll-timeline: --filtros-cats inline;
  }
  .filtros__cats::-webkit-scrollbar { display: none; }
  .tab { scroll-snap-align: start; flex: none; padding-block: .42rem; }

  .filtros__inner { position: relative; timeline-scope: --filtros-cats; }
  .filtros__inner::after {
    content: ''; position: absolute; pointer-events: none;
    right: 0; top: .55rem; height: 2.1rem; width: 3.25rem;
    background: linear-gradient(90deg, rgba(248,246,242,0), var(--bg) 70%);
  }
  @supports (animation-timeline: scroll()) {
    .filtros__inner::after {
      animation-name: catsFundido;
      animation-duration: 1ms;      /* la maneja la línea de tiempo, no el reloj */
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --filtros-cats;
      animation-range: 85% 100%;
    }
  }

  .filtros__ctrl { flex-wrap: wrap; gap: .45rem; }
  .select { flex: 1 1 40%; min-width: 0; }
  .buscador { flex: 1 1 60%; }
}
@keyframes catsFundido { from { opacity: 1; } to { opacity: 0; } }

/* -------------------------------------------------- grilla + vacío */
.cat__grid { padding-block: 1.5rem; }
.vacio {
  padding: clamp(3rem, 8vw, 5rem) 1rem; text-align: center;
  border: 1px dashed var(--border-2); border-radius: var(--radius);
}
.vacio b { display: block; font: 600 var(--fs-h3)/1.2 var(--head); color: var(--ink); margin-bottom: .5rem; }
.vacio p { margin: 0 0 1.25rem; color: var(--muted); }
.vacio[hidden] { display: none; }

.vermas { display: flex; justify-content: center; padding-block: 2rem; }
.vermas[hidden] { display: none; }

/* -------------------------------------------------- desplegables propios
   La lista que abre un <select> la dibuja el sistema y no se puede estilar:
   quedaba gris y ajena al resto de los filtros. Cada select sigue en el DOM
   (el filtrado, el teclado y las reglas :has de arriba dependen de él) pero
   se oculta a la vista, y desp.js dibuja arriba un botón y una lista con el
   mismo lenguaje que los chips: relleno de tinta al pasar, marca amarilla en
   el elegido y filete fino entre opciones. */
.select--nativo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.desp { position: relative; flex: none; }
.desp__btn {
  display: inline-flex; align-items: center; gap: .75rem;
  padding: .55rem .75rem; width: 100%;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: var(--card);
  font: 500 .8125rem/1 var(--body); color: var(--fg); cursor: pointer;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.desp__btn:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(245,196,0,.35); }
.desp__btn svg { width: 12px; height: 8px; margin-left: auto; flex: none; transition: transform .18s var(--ease); }
.desp__btn[aria-expanded="true"] { border-color: var(--ink); }
.desp__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.desp--elegido .desp__btn { border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

.desp__panel {
  position: absolute; z-index: 40; top: calc(100% + .35rem); left: 0;
  min-width: 100%; max-width: min(19rem, calc(100vw - 2rem));
  max-height: min(21rem, 60vh); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: .25rem; list-style: none;
  background: var(--card); border: 1px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 18px 40px -18px rgba(20,18,16,.45);
}
.desp__panel[hidden] { display: none; }
.desp__op {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: calc(var(--radius) - 2px);
  font: 500 .8125rem/1.3 var(--body); color: var(--fg); cursor: pointer;
  white-space: nowrap;
}
.desp__op + .desp__op { border-top: 1px solid var(--border); }
.desp__op::before {
  content: ""; width: .375rem; height: .375rem; flex: none;
  background: transparent; transition: background-color .15s var(--ease);
}
.desp__op[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.desp__op[aria-selected="true"]::before { background: var(--accent); }
@media (max-width: 520px) {
  .desp { flex: 1 1 40%; min-width: 0; }
  .desp__panel { max-width: calc(100vw - 2rem); }
}

/* -------------------------------------------------- hover solo con mouse
   En una pantalla táctil no hay hover: el navegador lo simula y el estilo
   queda pegado después de tocar. Estas reglas son las mismas de arriba,
   movidas acá sin cambiarles nada, para que solo corran donde hay puntero
   fino. El feedback táctil va por :active, que funciona en todo. */
@media (hover: hover) and (pointer: fine) {
  .volver:hover { color: var(--ink); }
  .volver:hover svg { transform: translateX(-3px); }
  .cat__pdf:hover { border-color: var(--ink); color: var(--ink); }
  .cat__nota a:hover { text-decoration-thickness: 2px; }
  .tab:hover { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
  .tab:hover .n { background: rgba(20,18,16,.12); color: var(--ink); }
  .select:hover { border-color: var(--ink); }
  .buscador input:hover { border-color: var(--ink); }
  .filtros__limpiar:hover { color: var(--ink); border-color: var(--border-2); }
  .desp__btn:hover { border-color: var(--ink); }
  .desp__op:hover, .desp__op.is-foco { background: rgba(20,18,16,.06); color: var(--ink); }
}