/* ============================================================================
   AHNSA — la barra de filtros McMaster. Hoja única para los cuatro navegadores.
   Pareja de js/ahnsa-filtros-mc.js y de tools/filtros_mc.py.

   Va DESPUÉS de css/ahnsa-sumi.css: hereda todo el lenguaje visual de ahí
   (colores, tipografía, la caja `.sumi-lado`) y sólo cambia lo que la mecánica
   nueva necesita. Todo cuelga de `.mcf` sobre el `<aside>` para no tocar nada
   que no sea la barra.

   Lo que cambia, en una línea cada uno:
     · TODO ABIERTO      — el acordeón muere; sólo se cierra a mano.
     · CERO ESCONDIDO    — el valor sin resultados desaparece (Mario 17-ago y
                           1-sep); hasta v7 sólo en las listas cortadas.
     · BUSCADOR EN MARCA — una caja de texto arriba de las marcas (v8, 1-sep).
     · FICHAS            — los grupos donde la diferencia es VISUAL dejan de ser
                           una lista de texto y pasan a ser una cuadrícula de
                           tarjetas con el dibujo grande arriba. Es el mockup.
     · CABECERA LIGERA   — "FILTROS · Limpiar todo", también en escritorio.
     · CABECERA PEGAJOSA — con la columna larga, saber en qué grupo vas.
     · ÍNDICE DE SALTOS  — sólo con dedo, donde la columna larga sí estorba.
   ============================================================================ */

/* ── 1. PLEGADOS POR DEFECTO (v8, mockup) ──────────────────────────────────
   El servidor pinta `class="sumi-g abierto"` SÓLO en los 3-4 grupos del mockup
   (TABLAS.abiertos) y el resto sin la clase; la regla vieja
   `.sumi-g.abierto .sumi-g-c{display:block}` los abre y `.sumi-g-c{display:none}`
   pliega los demás. El JS cambia esa única clase; `.cerrado` queda por si un
   HTML anterior a v8 todavía la trae. */
/* ── 0. --hm-cab-h: la altura VISIBLE de la cabecera ────────────────────────
   (v10, 3-sep. Mario: «al hacer scroll se quita el logo pero hay un espacio
   awkward ahí en filtros».)

   Hay DOS alturas y hasta hoy sólo existía una:
     · `--hm-hdr-h`  = lo que MIDE la barra (73 px). La escribe en :root el
                       script del cromo (tools/cromo_v3/mega_js.html).
     · `--hm-cab-h`  = lo que SE VE de la barra. Al bajar, el cromo le pone
                       `.is-oculto` al <nav> y lo saca entero de la pantalla
                       con un translate: en ese estado lo visible es 0.

   La barra de filtros se pegaba a `--hm-hdr-h` en los dos estados, así que con
   la cabecera fuera quedaba una franja MUERTA de 73 px encima de «FILTROS»
   (medido a 1440x900 con scroll 600: nav.bottom = 0 y .sumi-lado.top = 73).
   El fondo blanco lo pinta `.sumi-cuerpo::before`, por eso la franja no se
   leía como un hueco de fondo sino como un hueco de contenido: peor.

   El interruptor va en `html:has(...)` porque `nav.hm-hdr` es HERMANO de
   <main>, no antepasado — el mismo motivo por el que la regla de la cabecera
   ancha, más abajo, también cuelga de `html:has()`. Especificidad: (0,2,2)
   contra (0,1,0) de `:root`, así que gana sin `!important`. Sin `:has()` la
   variable se queda en la altura completa, que es el comportamiento de hoy.

   Se define FUERA de la media query de 1100 px a propósito: es un dato del
   cromo, no de este listado, y así puede usarlo cualquier otro pegajoso. */
:root { --hm-cab-h: var(--hm-hdr-h, 73px); }
html:has(nav.hm-hdr.is-oculto) { --hm-cab-h: 0px; }

.mcf .sumi-g.cerrado .sumi-g-c { display: none; }
.mcf .sumi-g.cerrado .sumi-g-flecha { transform: rotate(45deg); margin-top: -3px; }
/* Sin numeración "1.": el mockup no numera. El span sigue en los HTML viejos
   hasta que se regeneren; aquí se apaga para todos. */
.mcf .sumi-g-num { display: none !important; }
.mcf .sumi-g-t { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.mcf .sumi-g.abierto .sumi-g-h { border-bottom-color: transparent; }

/* ── 1b. LA CASILLA (v8, mockup) ────────────────────────────────────────────
   Cada valor de LISTA lleva una casilla visual delante: cuadrado gris vacío,
   azul con palomita al elegirlo. Es sólo CSS sobre el botón que ya existe
   (`aria-pressed` sigue siendo el estado accesible), así que el marcado no
   cambia y el espejo prerender↔JS tampoco. Las rejillas (formas, operación,
   pastillas ISO y de disponibilidad) no la llevan: ahí la casilla es la celda. */
.mcf .sumi-vals:not(.mcf-rejilla) .sumi-val::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 1.5px solid var(--nav-conteo, #8496AC);
  border-radius: 3px;
  background: var(--nav-fondo, #fff);
  transition: background-color .12s, border-color .12s;
}
.mcf .sumi-vals:not(.mcf-rejilla) .sumi-val:hover::before { border-color: var(--nav-liga, #1878B9); }
.mcf .sumi-vals:not(.mcf-rejilla) .sumi-val.activo::before {
  border-color: #1878B9;
  background: #1878B9 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.mcf .sumi-vals:not(.mcf-rejilla) .sumi-val.cero::before { border-style: dashed; }
.mcf .sumi-vals:not(.mcf-rejilla) .sumi-val.activo {
  background: none;
  color: var(--nav-tinta, #14213D);
  font-weight: 700;
}

/* ── 1c. EL RANGO Desde | Hasta + deslizador (v8, mockup) ───────────────────
   Vive arriba de los renglones del grupo de medida y corre sobre la columna
   exacta `-x` del modelo (TABLAS.rango). Dos entradas numéricas en mm, un
   deslizador doble (dos <input type=range> superpuestos: sólo los pulgares
   reciben el puntero). El servidor lo pinta vacío; el navegador lo engancha. */
.mcf .mcf-rango {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: end;
  margin: 2px 0 10px;
}
.mcf .mcf-rango-l { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mcf .mcf-rango-l > span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--nav-tinta-3, #6B7684);
}
.mcf .mcf-rango-i {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 8px;
  border: 1px solid var(--nav-linea, #D5DCE5);
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--nav-tinta, #14213D);
  background: var(--nav-fondo, #fff);
  -moz-appearance: textfield;
}
.mcf .mcf-rango-i::-webkit-outer-spin-button,
.mcf .mcf-rango-i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mcf .mcf-rango-i:focus { outline: 2px solid var(--nav-liga-alta, #1878B9); outline-offset: 1px; }
.mcf .mcf-rango-u {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--nav-tinta-3, #6B7684);
  padding-bottom: 9px;
}
.mcf .mcf-rango-s {
  grid-column: 1 / -1;
  position: relative;
  height: 22px;
  margin: 2px 6px 0;
}
.mcf .mcf-rango-s::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 9px;
  height: 4px;
  border-radius: 2px;
  background: var(--nav-linea, #D5DCE5);
}
.mcf .mcf-rango-s::after {
  content: '';
  position: absolute;
  top: 9px;
  height: 4px;
  border-radius: 2px;
  background: #1878B9;
  left: var(--mcf-ra, 0%);
  right: calc(100% - var(--mcf-rb, 100%));
}
.mcf .mcf-rango-r {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 22px;
  margin: 0;
  background: none;
  pointer-events: none;
  z-index: 2;
}
.mcf .mcf-rango-r::-webkit-slider-runnable-track { background: none; height: 22px; }
.mcf .mcf-rango-r::-moz-range-track { background: none; height: 22px; }
.mcf .mcf-rango-r::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 16px; height: 16px;
  margin-top: 3px;
  border-radius: 50%;
  border: 2px solid #1878B9;
  background: #fff;
  box-shadow: 0 1px 3px rgba(10, 30, 94, .25);
  cursor: pointer;
}
.mcf .mcf-rango-r::-moz-range-thumb {
  pointer-events: auto;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #1878B9;
  background: #fff;
  box-shadow: 0 1px 3px rgba(10, 30, 94, .25);
  cursor: pointer;
}
.mcf .mcf-rango-r:focus-visible { outline: none; }
.mcf .mcf-rango-r:focus-visible::-webkit-slider-thumb { outline: 2px solid #1878B9; outline-offset: 2px; }
/* Con el rango puesto, los renglones de cubeta de abajo son atajos: se atenúan
   un poco para que el ojo caiga en el valor exacto. */
.mcf .mcf-rango.activo + .sumi-vals { opacity: .78; }
@media (pointer: coarse) {
  .mcf .mcf-rango-i { min-height: 44px; font-size: 16px; }   /* 16: iOS no hace zoom */
  /* el pulgar es el blanco: 28 px sobre una pista de 44 (piso táctil) */
  .mcf .mcf-rango-s { height: 44px; }
  .mcf .mcf-rango-s::before, .mcf .mcf-rango-s::after { top: 20px; }
  .mcf .mcf-rango-r { height: 44px; }
  .mcf .mcf-rango-r::-webkit-slider-runnable-track { height: 44px; }
  .mcf .mcf-rango-r::-moz-range-track { height: 44px; }
  .mcf .mcf-rango-r::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: 8px; }
  .mcf .mcf-rango-r::-moz-range-thumb { width: 24px; height: 24px; }
}

/* ── 1d. "¿Necesitas ayuda?" (v8, mockup de insertos) ───────────────────────
   Al pie de la barra, estática. El asesor es WhatsApp (D8: sin chatbot). */
.mcf .mcf-ayuda {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 12px 12px;
  padding: 14px 14px 14px 12px;
  border-radius: 10px;
  background: var(--nav-lavado, #F4F7FB);
  border: 1px solid var(--nav-linea-2, #EDF1F6);
}
.mcf .mcf-ayuda-ic { flex: none; width: 28px; height: 28px; color: #1878B9; margin-top: 1px; }
.mcf .mcf-ayuda-t { min-width: 0; }
.mcf .mcf-ayuda-t b { display: block; font-size: 13.5px; color: var(--nav-tinta, #14213D); }
.mcf .mcf-ayuda-t p {
  margin: 3px 0 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--nav-tinta-2, #4A5666);
}
.mcf .mcf-ayuda-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #1878B9;
  border-radius: 7px;
  background: #fff;
  color: #0F4C7A !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
}
.mcf .mcf-ayuda-b:hover { background: #1878B9; color: #fff !important; }

/* ── 2. LA CABECERA DE LA COLUMNA ──────────────────────────────────────────
   Como en el mockup: ligera, el rótulo a la izquierda y "Limpiar todo" a la
   derecha. Antes era azul marino con logo, venía del cajón del teléfono, y en
   escritorio estorbaba tanto que una regla acabó escondiéndola — con lo cual la
   columna se quedaba sin manera de limpiarse hasta que hubiera un chip que
   quitar. Ahora existe siempre, y no pesa. */
.mcf .sumi-lado-h.mcf-h {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  color: var(--nav-tinta, #14213D);
  border-bottom: 1px solid var(--nav-linea, #DCE6F2);
  border-radius: 0;
  padding: 12px 14px 11px;
}
.mcf .mcf-h-t {
  flex: 1;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .09em;
  color: var(--nav-tinta, #14213D);
}
.mcf .mcf-limpiar {
  flex: none;
  background: none;
  border: 0;
  padding: 4px 2px;
  min-height: 28px;
  font: inherit;
  font-size: 12.5px;
  color: var(--nav-liga, #1878B9);
  cursor: pointer;
  text-decoration: none;
}
.mcf .mcf-limpiar:hover { text-decoration: underline; }
.mcf .mcf-limpiar:focus-visible { outline: 2px solid var(--nav-aqui, #0A5C99); outline-offset: 2px; }
/* "Cerrar" es del cajón: con ratón no hay nada que cerrar. */
.mcf .sumi-cerrar-filtros { display: none; }

/* ── 3. CABECERA DEL GRUPO PEGAJOSA ────────────────────────────────────────
   `.sumi-lado` es el contenedor con scroll; el encabezado se ancla a él. */
.mcf .sumi-g-h {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--nav-fondo, #fff);
  border-bottom: 1px solid transparent;
  min-height: 42px;
  padding: 9px 14px 8px;
}
.mcf .sumi-g-h:hover { background: var(--nav-lavado, #F2F7FC); }
.mcf .sumi-g { border-bottom: 1px solid var(--nav-linea-2, #E6EDF5); }
.mcf .sumi-g-c { padding: 0 12px 14px; }
/* La NUMERACIÓN de los grupos se FUE (v8, 2026-08-22): el mockup v8 no numera.
   Se apaga arriba (§1) para los HTML viejos; los nuevos ya no traen el span. */

/* Un grupo donde ya no queda nada (todos sus valores en cero) sigue visible,
   pero se apaga: es informacion, no basura. */
.mcf .sumi-g.mcf-agotado .sumi-g-t { opacity: .45; }

/* ── 4. EL VALOR, EN RENGLÓN ───────────────────────────────────────────────
   Los grupos de alta cardinalidad —grado, serie, rompevirutas, tolerancia—
   siguen así: en celda ocuparían cuatro veces más y no se leerían mejor. */
.mcf .sumi-val { padding: 5px 8px; min-height: 34px; gap: 9px; }
.mcf .sumi-val-c { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }

/* EL CERO. Desde v8 (Mario 1-sep) el <li> del cero se esconde en TODA lista
   (§6); este gris queda como red de seguridad para un cero que se vea por
   otra vía (un HTML anterior, o el buscador enseñando un renglón que el
   repintado marcó en cero un instante antes). */
.mcf .sumi-val.cero {
  opacity: .38;
  cursor: default;
  filter: grayscale(1);
}
.mcf .sumi-val.cero:hover { background: none; }
.mcf .sumi-val.cero .sumi-val-c { font-weight: 400; }

.mcf .sumi-val.activo { background: var(--nav-aqui-suave, #E8F2FB); color: var(--nav-aqui, #0A5C99); }
.mcf .sumi-val:focus-visible { outline: 2px solid var(--nav-aqui, #0A5C99); outline-offset: 1px; }

/* ── 5. LAS FICHAS ─────────────────────────────────────────────────────────
   El mockup, literal: cada valor es una tarjeta con el dibujo GRANDE arriba y
   el nombre abajo, cuatro o cinco por fila. El número de columnas lo escribe el
   servidor en `--mcf-col` porque depende del grupo: las formas van de cinco en
   cinco (dos filas = las diez del mockup), los tipos de herramienta de cuatro.

   El marcado por dentro es EXACTAMENTE el mismo que el del renglón —dibujo,
   `.sumi-val-t`, `.sumi-val-c`—, así que el JS que pinta conteos, ceros y chips
   no se entera de que cambió nada. Eso es lo que mantiene el espejo vivo. */
.mcf .sumi-vals.mcf-rejilla {
  display: grid;
  grid-template-columns: repeat(var(--mcf-col, 4), minmax(0, 1fr));
  gap: 6px;
  padding-top: 3px;
}
.mcf .mcf-rejilla > li { min-width: 0; }
.mcf .mcf-rejilla .sumi-val {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-height: 100%;
  padding: 10px 4px 8px;
  border: 1px solid var(--nav-linea, #DCE6F2);
  border-radius: 9px;
  background: var(--nav-fondo, #fff);
  text-align: center;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.mcf .mcf-rejilla .sumi-val-t {
  flex: none;
  /* En una columna flex el ancho lo pone el CONTENIDO, así que sin este tope
     "Paralelogramo 85° (A)" se desbordaba de su celda y pisaba a la de al
     lado. `flex:none` gobierna el alto, no el ancho: hay que decirlo aparte. */
  max-width: 100%;
  font-size: 11px;
  line-height: 1.25;
  /* `break-word` y NO `anywhere`: sólo parte una palabra cuando de verdad no
     cabe entera. Con `anywhere` la celda de "Triangular 60° (T)" salía como
     "Triangul / ar 60° (T)", que no se lee como un corte de línea sino como
     una errata — y en una barra donde todo lo demás es preciso, eso quema la
     confianza más rápido que cualquier otra cosa. */
  overflow-wrap: break-word;
  /* Y cuando de verdad no cabe, que parta POR SÍLABA. La página declara
     lang="es-MX", así que el navegador guioniza en español: "Porta-
     herramientas" se lee; "Portaherra / mientas" parece un error. */
  hyphens: auto;
  -webkit-hyphens: auto;
}
.mcf .mcf-rejilla .sumi-val-c {
  min-width: 0;
  text-align: center;
  font-size: 11px;
  margin-top: auto;
}
.mcf .mcf-rejilla .sumi-val:hover {
  background: none;
  border-color: var(--nav-liga, #1878B9);
  box-shadow: 0 2px 9px rgba(10, 30, 94, .10);
  transform: translateY(-1px);
}
.mcf .mcf-rejilla .sumi-val.activo {
  background: var(--nav-aqui-suave, #E8F2FB);
  border-color: var(--nav-aqui, #0A5C99);
  box-shadow: inset 0 0 0 1px var(--nav-aqui, #0A5C99);
}
.mcf .mcf-rejilla .sumi-val.cero:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--nav-linea, #DCE6F2);
}
/* El dibujo, GRANDE: 40 px es el tamaño para el que está calculado el grosor
   de trazo del sprite (ningún trazo baja de 1.4 px ahí). */
.mcf .mcf-rejilla .sumi-sk,
.mcf .mcf-rejilla .sumi-sk-hueco { width: 40px; height: 40px; }

/* ── 5b. LAS PASTILLAS ─────────────────────────────────────────────────────
   Disponibilidad y material a maquinar son anchos: el glifo es chico y el
   rótulo largo ("N · No ferrosos (aluminio)"). Van de dos en dos, con el glifo
   a la izquierda y el nombre y el conteo apilados — que es como los dibujó
   Mario en el mockup para "En existencia / Sobre pedido". */
.mcf .mcf-pastillas .sumi-val {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  justify-items: start;
  text-align: left;
  padding: 10px 12px;
}
.mcf .mcf-pastillas .sumi-val > :first-child { grid-row: 1 / 3; }
.mcf .mcf-pastillas .sumi-val-t {
  grid-column: 2;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  /* La pastilla es ancha: aquí las palabras NO se parten. "Superaleaciones"
     cortado como "Superaleacion / es" se lee como una errata. */
  overflow-wrap: break-word;
}
.mcf .mcf-pastillas .sumi-val-c {
  grid-column: 2;
  text-align: left;
  font-size: 12px;
  margin-top: 1px;
}

/* El punto de disponibilidad. Lleno = hay pieza hoy; medio = viene en camino;
   vacío = se pide. Contesta la primera pregunta del taller antes de leer. */
.mcf .mcf-punto {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--nav-conteo, #8496AC);
  display: block;
  transition: transform .16s ease, background-color .16s ease;
}
.mcf .mcf-punto.lleno { background: #2E7D32; border-color: #2E7D32; }
.mcf .mcf-punto.medio {
  border-color: #B26A00;
  background: linear-gradient(90deg, #B26A00 50%, transparent 50%);
}
.mcf .sumi-val:hover .mcf-punto { transform: scale(1.18); }

/* La pastilla ISO dentro de una ficha. El color lo pone css/ahnsa-sumi.css;
   aquí sólo el tamaño y el "sin material declarado", que no tiene letra ISO
   porque no la tiene — y ponerle una sería inventar el dato. */
.mcf .mcf-rejilla .iso-mat { min-width: 26px; height: 26px; font-size: 13px; }
.mcf .iso-mat.sin {
  background: none;
  border: 1px dashed var(--nav-conteo, #8496AC);
  color: var(--nav-conteo, #8496AC);
}

/* ── 6. EL CORTE Y EL "VER LOS 34" ─────────────────────────────────────────
   La ÚNICA expansión que existe. Expande ESE grupo y no cierra ningún otro.

   El corte se marca con una CLASE, no con `:nth-child`, y esa clase la escribe
   el servidor y la recalcula el JS en cada cambio. La razón es Mario: al ir
   eligiendo especificaciones quiere ver QUIÉN QUEDA. Con `:nth-child` los ocho
   renglones de arriba se llenaban de ceros y las marcas que sí tenían pieza se
   quedaban escondidas bajo el "Ver los 55" — justo al revés de lo que sirve.
   Ahora el corte cuenta sólo renglones VIVOS, y cuántos caben lo dice
   `data-tope` en el propio marcado: diez en una rejilla de cinco columnas
   (dos filas completas), ocho en una lista.

   v8 (Mario 1-sep): `mcf-oculta` esconde en TODA lista, no sólo en las
   cortadas. El JS ya marcaba el cero con esa clase en las listas completas
   (forma, operación, las de menos de once renglones) pero esta regla sólo
   miraba `.mcf-corta`, así que ahí el cero seguía EN GRIS: medido en
   /productos/insertos con marca=SUMITOMO, 7 renglones grises (subfamilia 1,
   forma 1, recubrimiento 5). "Si una marca no maneja barrenado / forma
   especial / ciertos materiales, que la opción DESAPAREZCA en vez de quedar
   en gris." El servidor sólo escribe la clase bajo el corte, así que el
   espejo prerender↔JS no cambia. */
.mcf .sumi-vals > li.mcf-oculta { display: none; }
.mcf .sumi-ver-mas { margin: 8px 0 0; min-height: 32px; }

/* ── 6b. EL BUSCADOR DENTRO DEL GRUPO (v8, Mario 1-sep) ─────────────────────
   "Buscador dentro del filtro de marcas". Con texto en la caja la lista la
   decide el buscador (clase `mcf-buscando` en el <ul>): lo que coincide se
   enseña aunque cayera bajo el corte, lo que no coincide —y el cero— se va
   con `mcf-fuera`, y el "Ver los N" se esconde porque ya no hay nada que
   desplegar. Con la caja vacía ninguna de estas clases existe. */
.mcf .mcf-busca {
  position: relative;
  margin: 2px 0 8px;
}
.mcf .mcf-busca-ic {
  position: absolute;
  left: 9px;
  top: 17px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--nav-tinta-3, #6B7684);
  pointer-events: none;
}
.mcf .mcf-busca-i {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 34px;
  padding: 0 10px 0 31px;
  border: 1px solid var(--nav-linea, #D5DCE5);
  border-radius: 7px;
  font: inherit;
  font-size: 13px;
  color: var(--nav-tinta, #14213D);
  background: var(--nav-fondo, #fff);
  -webkit-appearance: none;
  appearance: none;
}
.mcf .mcf-busca-i::-webkit-search-decoration { -webkit-appearance: none; }
.mcf .mcf-busca-i:focus { outline: 2px solid var(--nav-liga-alta, #1878B9); outline-offset: 1px; }
.mcf .mcf-busca-i::placeholder { color: var(--nav-conteo, #8496AC); }
.mcf .mcf-busca-nada {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--nav-tinta-3, #6B7684);
}
.mcf .mcf-busca-nada[hidden] { display: none; }
/* con el buscador la lista se estira sin corte, y el "Ver los N" sobra */
.mcf .sumi-vals.mcf-buscando > li { display: list-item; }
.mcf .sumi-vals.mcf-buscando > li.mcf-fuera { display: none; }
.mcf .sumi-vals.mcf-buscando + .sumi-ver-mas { display: none; }

/* ── 7. EL DIBUJO Y SU MINI-ANIMACIÓN ──────────────────────────────────────
   El contenido de un `<use>` vive en un shadow tree y los selectores de esta
   hoja NO entran ahí. Lo único que cruza son las propiedades HEREDADAS — entre
   ellas las variables CSS. Por eso aquí no se anima nada directamente: se
   ENCIENDEN variables, y la hoja que va dentro del sprite (la escribe
   tools/gen_sprite.py) es la que tiene los @keyframes.

   En reposo ninguna variable existe, `animation-name` vale `none`, y se ve el
   dibujo quieto y completo — que es el estado FINAL de cada animación. Todas
   van del "antes" al reposo, nunca al revés: al soltar el cursor el dibujo ya
   está donde tiene que estar y no hay ni bucle ni salto. */
.mcf .sumi-sk, .mcf .sumi-sk-hueco {
  flex: none;
  width: 24px;
  height: 24px;
  display: block;
}
/* El azul del dibujo va con VALORES PROPIOS, no con los tokens de navegación,
   y es a propósito: `--nav-aqui` de este sitio es ÁMBAR (#B26A00) —el color de
   "estás aquí"—, así que atarle el trazo dejaba los sketches naranjas al pasar
   el cursor. Mario los pidió en azul AHNSA: #1878B9 de trazo y #0A1E5E de
   detalle. El ámbar se queda para UNA sola cosa, la de siempre: el valor que ya
   está elegido. */
.mcf .sumi-sk {
  color: #1878B9;                         /* azul AHNSA: el trazo */
  --sk-detalle: #0A1E5E;                  /* navy: filos, roscas, marcas */
  --sk-pieza: #DCEAF7;                    /* la pieza de trabajo */
  overflow: visible;
}
.mcf .sumi-val:hover .sumi-sk,
.mcf .sumi-val:focus-visible .sumi-sk {
  color: #0F4C7A;                         /* el mismo azul, más hondo */
  --sk-guia: 1;                           /* la guía punteada se enciende */
  --sk-cota: 1;                           /* y el arco del ángulo se acota */
}
.mcf .sumi-val.activo .sumi-sk {
  color: var(--nav-aqui, #B26A00);
  --sk-detalle: #7A4A00;
  --sk-guia: .9;
}
.mcf .sumi-val.cero .sumi-sk { --sk-guia: .25; }

/* Las cuatro llaves de la animación. Se prenden juntas y cada dibujo usa las
   que le tocan: un torneado mueve la herramienta (`avanza`) y gira su flecha
   (`gira`); una forma sólo se traza; unos filos aparecen de uno en uno. */
@media (pointer: fine) {
  .mcf .sumi-val:hover .sumi-sk,
  .mcf .sumi-val:focus-visible .sumi-sk {
    --sk-traza: sk-traza;
    --sk-uno: sk-uno;
    --sk-gira: sk-gira;
    --sk-avanza: sk-avanza;
    --sk-nace: sk-nace;
  }
}
/* Con dedo no hay hover que valga, y una animación que se dispara al tocar
   compite con el propio filtro que acabas de picar. Quieto. */

/* El sprite vive en la página pero no ocupa un pixel. Va FUERA de cualquier
   contenedor que el JS pueda vaciar: un `<use href="#sk-...">` que apunta a un
   símbolo borrado no da error, no da 404 — deja un hueco, que es el síntoma
   más difícil de diagnosticar que existe. */
.ahnav-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── 7 bis. EL CONMUTADOR mm | pulg ────────────────────────────────────────
   Mario: "círculo inscrito, incluye un botón para separar medidas en pulgadas
   y mm... también con radio de punta, y que sean fracciones tipo 3/8".
   Va pequeño y arriba del grupo: es un cambio de LECTURA, no un filtro más, y
   si pesara como un filtro competiría con lo que de verdad hay que elegir.
   Sólo cambia texto dentro de celdas que ya tienen su tamaño — no mueve nada
   de sitio, así que no hay CLS que pagar. */
.mcf-uni {
  display: inline-flex;
  margin: 0 0 8px;
  border: 1px solid var(--nav-linea, #DCE6F2);
  border-radius: 999px;
  overflow: hidden;
  background: var(--nav-fondo, #fff);
}
.mcf-u {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 4px 11px;
  min-height: 26px;
  color: var(--nav-tinta-2, #46586E);
  font-variant-numeric: tabular-nums;
}
.mcf-u + .mcf-u { border-left: 1px solid var(--nav-linea, #DCE6F2); }
.mcf-u:hover { background: var(--nav-lavado, #F2F7FC); }
.mcf-u.activo {
  background: var(--nav-aqui-suave, #E8F2FB);
  color: var(--nav-liga, #1878B9);
}
.mcf-u:focus-visible { outline: 2px solid var(--nav-liga, #1878B9); outline-offset: -2px; }
/* Con dedo el blanco de toque manda: 26 px no se pica. 44 es el piso
   (informe móvil 1-sep, L3/A7). */
@media (pointer: coarse) {
  .mcf-u { min-height: 44px; padding: 8px 16px; font-size: 13px; }
}

/* ── 8. LOS CHIPS DE ARRIBA ────────────────────────────────────────────────
   Se ve de un vistazo por qué la lista está como está. */
.sumi-chips .sumi-chip i { font-style: normal; opacity: .62; font-weight: 600; }
.sumi-chips .sumi-chip.limpia { background: none; border-style: dashed; }

/* El renglón de "esto es lo más cercano" cuando la búsqueda tuvo que aflojarse.
   Un cero seco no le sirve a nadie: si hay algo parecido, se enseña y se dice
   qué se ignoró para llegar a él. */
.sumi-relax {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--nav-liga, #1878B9);
  background: var(--nav-lavado, #F2F7FC);
  border-radius: 0 7px 7px 0;
  font-size: 13.5px;
  color: var(--nav-tinta-2, #46586E);
}

/* ── 9. ÍNDICE DE SALTOS ───────────────────────────────────────────────────
   Con todo abierto la columna es larga. En escritorio eso está BIEN: se
   escanea de un golpe, que es la gracia. Con dedo, en cambio, el cajón es la
   pantalla entera y hay que poder llegar al grupo de un salto — sin volver al
   acordeón, que es lo que había que matar. */
.mcf-indice { display: none; }

/* El cajón tiene que quedar POR ENCIMA de la barra de navegación del sitio
   (z-index 1500). Con el 60 que traía, el encabezado del sitio se le montaba
   encima y se comía justo el índice de saltos: el cajón se veía "empezando a
   medias" y nadie entendía por qué. */
.ahsumi.filtros-abiertos .mcf.sumi-lado {
  z-index: 1600;
  background: var(--nav-fondo, #fff);
}
/* Y la barra del pulgar se quita mientras el cajón está abierto: si no, tapa
   el último grupo de filtros con dos botones que ahí no sirven para nada.
   La clase va en el <body> y no en el contenedor del navegador porque
   `.ah-sticky` cuelga de OTRA rama del documento (`main`), y desde el
   contenedor no hay selector que la alcance. La regla que había —
   `.ahsumi.filtros-abiertos .ah-sticky`— no casaba con nada y por eso la barra
   seguía tapando el último filtro en los cuatro navegadores. */
body.mcf-cajon .ah-sticky { display: none !important; }

@media (pointer: coarse) {
  .mcf-indice {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 9px 12px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--nav-fondo, #fff);
    border-bottom: 1px solid var(--nav-linea, #DCE6F2);
    -webkit-overflow-scrolling: touch;
  }
  .mcf-indice::-webkit-scrollbar { display: none; }
  .mcf-ix {
    flex: none;
    padding: 7px 12px;
    min-height: 44px;                      /* piso táctil (informe 1-sep) */
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--nav-linea, #DCE6F2);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--nav-tinta-2, #46586E);
    text-decoration: none;
    white-space: nowrap;
  }
  .mcf-ix:active { background: var(--nav-aqui-suave, #E8F2FB); color: var(--nav-aqui, #0A5C99); }
  /* con dedo, la cabecera del grupo se pega DEBAJO del índice */
  .mcf .sumi-lado-h.mcf-h { position: sticky; top: 0; z-index: 6; padding: 8px 14px 7px; }
  .mcf .mcf-limpiar, .mcf .sumi-cerrar-filtros { min-height: 44px; padding: 4px 10px; }
  .mcf .sumi-cerrar-filtros { display: inline-block; }
  /* la cabecera (8+44+7+1) y el índice (9+44+9+1) suman 123 */
  .mcf .sumi-g-h { top: 123px; min-height: 46px; }
  .mcf .sumi-val { min-height: 46px; padding: 9px; }
  .mcf .sumi-ver-mas { min-height: 44px; }
  .mcf .mcf-busca-i { min-height: 44px; font-size: 16px; }   /* 16: iOS no hace zoom */
  .mcf .mcf-busca-ic { top: 22px; }
  /* piso de 13 px para lo que se lee (A6 del informe móvil) */
  .mcf .sumi-val-t, .mcf .sumi-val-c, .mcf .mcf-busca-nada { font-size: 13px; }
  .mcf .mcf-rango-l > span { font-size: 12px; }
  .mcf .sumi-sk, .mcf .sumi-sk-hueco { width: 26px; height: 26px; }
  /* La ficha con dedo: el blanco de toque manda, así que baja a tres columnas
     como máximo y el dibujo crece. Una rejilla de cinco en un teléfono de 390
     px da celdas de 55 px, que no se pican. */
  .mcf .sumi-vals.mcf-rejilla { grid-template-columns: repeat(min(var(--mcf-col, 4), 3), minmax(0, 1fr)); }
  .mcf .mcf-rejilla .sumi-val { min-height: 92px; padding: 12px 6px 10px; }
  .mcf .mcf-rejilla .sumi-sk, .mcf .mcf-rejilla .sumi-sk-hueco { width: 44px; height: 44px; }
  .mcf .mcf-rejilla .sumi-val-t { font-size: 13px; }
  .mcf .mcf-pastillas .sumi-val { min-height: 56px; }
}

/* ── 9b. LOS BLANCOS DE TOQUE FUERA DE LA COLUMNA (informe móvil 1-sep, L3) ──
   El botón "Filtros" que ABRE el cajón medía 71×40 y los chips de subfamilia
   37 px de alto: los dos por debajo del piso de 44. El botón es de esta barra
   (es su puerta) aunque lo pinte el listado; los chips viven en
   css/ahnsa-hims.css (§ chips de subfamilia) y aquí sólo se les sube el piso
   con dedo — cuando esa hoja lo adopte, esta regla sobra. Sólo con dedo: con
   ratón, theme.css los deja en 36 y se ven proporcionados. */
@media (pointer: coarse) {
  .ahsumi .sumi-abrir-filtros, .ahprodnav .sumi-abrir-filtros,
  .sumi-abrir-filtros { min-height: 44px; min-width: 44px; padding: 0 16px; }
  .hm-cat .hm-cat__subs .hm-cat__sub, .hm-cat__sub {
    min-height: 44px;
    box-sizing: border-box;
    align-items: center;
  }
}

/* ── 10. LA COLUMNA ────────────────────────────────────────────────────────
   Con todos los grupos abiertos la barra es alta a propósito. */
.mcf.sumi-lado { scrollbar-width: thin; }

/* ══════════════════════════════════════════════════════════════════════════
   ESCRITORIO SIN "AWKWARD" (Mario, 16 ago: "el sistema de filtros sigue
   awkward"). El estorbo que quedaba era el DOBLE SCROLL: la columna traía su
   propio overflow-y dentro del scroll de la página — dos barras anidadas, la
   sensación torpe clásica. McMaster no lo hace: su columna fluye con la
   página. En escritorio se quita el tope de altura y el scroll interno; el
   sticky se queda sólo en la cabecera de resultados.

   Lo que esta regla ESCONDÍA y ya no: la cabecera de la columna (ahora es
   ligera y sí sirve, porque lleva "Limpiar todo") y la numeración de los
   grupos (el mockup numera). Se fueron a propósito.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 921px) and (pointer: fine) {
  .mcf.sumi-lado,
  .sumi-lado {
    position: static;
    max-height: none;
    overflow: visible;
  }
  /* La columna crece de 320 a 364 px. No es capricho: con fichas de cinco
     columnas, 320 px dejaban celdas de 57 px y "Rectangular (L)" salía en tres
     renglones. En el mockup la columna es bastante más ancha todavía (casi un
     tercio de la pantalla); 364 es donde las diez formas de un inserto caben en
     dos filas legibles sin quitarle sitio a las tarjetas de producto, que son
     las que venden. */
  .ahsumi:has(.mcf) .sumi-cuerpo { grid-template-columns: 364px minmax(0, 1fr); }
  .mcf .sumi-vals:not(.mcf-rejilla) button {
    padding: 3px 10px;
    min-height: 27px;
    font-size: 13px;
  }
  .mcf .sumi-g, .sumi-g { border-bottom: 1px solid var(--nav-linea, #E8E4DA); }
  .mcf .sumi-g:last-child, .sumi-g:last-child { border-bottom: 0; }
}

/* Quien pidió que nada se mueva, no ve nada moverse. La hoja del sprite apaga
   sus @keyframes por su cuenta; aquí se apaga lo que vive en esta hoja. */
@media (prefers-reduced-motion: reduce) {
  .mcf .mcf-rejilla .sumi-val,
  .mcf .mcf-punto { transition: none; }
  .mcf .mcf-rejilla .sumi-val:hover { transform: none; }
  .mcf .sumi-val:hover .mcf-punto { transform: none; }
}

/* v7 (29-ago): Marca primera y sin conteos. Mario: "marca esconde el
   numero de codigos porfavor y muevelo hasta arriba". El ORDEN vive en
   rango() (marca = -1 en filtros_mc.py y en el JS); aqui solo se apaga
   el conteo. */
.mcf .sumi-g[data-g="marca"] .sumi-val-c { display: none; }

/* ==========================================================================
   v9 - LA BARRA DE FILTROS COMO COLUMNA DE APLICACION  (Mario, 1-sep 21:30,
   "tal cual la maqueta": _entrega_filtros_ux/_sidebar_completo_{1920,1440}.png)

   Que cambia y por que
   --------------------
   Hasta v8 la barra era una tarjeta dentro de un contenedor de 1,480 px que se
   iba con el scroll: a 1920 px el visitante veia 220 px de margen muerto a cada
   lado y, en cuanto bajaba media pantalla, perdia los filtros de vista y tenia
   que volver arriba para cambiar uno. Desde v9 es una columna PEGADA al borde
   izquierdo, bajo la cabecera, a toda la altura de la ventana y con su propio
   scroll: los filtros no se van nunca, y el ancho que sobraba se lo queda la
   rejilla de tarjetas (a 1920: de 1,060 a 1,536 px de columna util).

   ESTO REVIERTE, A PROPOSITO, LA DECISION DEL 16-AGO que vive unas lineas mas
   arriba (`position: static; overflow: visible` desde 921 px). Aquella quitaba
   el DOBLE SCROLL -dos barras anidadas, la sensacion torpe clasica- y era
   correcta mientras la columna era una tarjeta que fluia con la pagina. Ya no
   hay doble scroll aqui: la columna ocupa la ventana entera, asi que su scroll
   ES el gesto natural sobre ella, igual que en cualquier aplicacion con
   navegador lateral. Se deja aquella regla intacta para 921-1099 px, que es
   donde la columna sigue siendo una tarjeta.

   Nada de esto toca el MARCADO de la barra: `verifica_filtros_mc` compara el
   outerHTML de `.sumi-lado` del servidor contra el del JS, y aqui solo hay CSS.

   Donde se aplica
   ---------------
   Solo en las paginas que llevan `.ahsumi--lado` en su contenedor: los 19
   listados de /productos/<familia> y las secciones de marca (/sumitomo/<sec>,
   /amec, /kyocera, /ntk). El hub /productos (`.ahprodhub`), las fichas y la
   home NO la llevan y no cambian ni un pixel.
   ========================================================================== */
@media (min-width: 1100px) {

  /* -- 1. la cabecera, a todo el ancho - SOLO en estas paginas --------------
     `nav.hm-hdr` es hermano de <main>, no antepasado: no hay forma de alcanzarlo
     con un descendiente, y por eso el interruptor va en `html:has(...)`. Global
     NO se puede: medido a 1920, el contenido de la home topa en 1,392 px
     (empieza en x=264) y el interior de la cabecera ya empieza en x=96 - abrirla
     a 24 px dejaria el logo a 240 px del contenido que encabeza. Aqui, en
     cambio, el contenido empieza en x=0, y una cabecera centrada sobre una
     barra pegada al borde es justo lo que se veia mal. */
  html:has(.ahsumi--lado) .hm-hdr-in { max-width: none; padding-left: 24px; padding-right: 24px; }

  /* -- 2. el contenedor pierde el tope y el aire lateral -------------------- */
  .ahsumi.ahsumi--lado { max-width: none; padding-left: 0; padding-right: 0; }
  .ahsumi.ahsumi--lado > .sumi-cuerpo {
    position: relative;
    grid-template-columns: 320px minmax(0, 1fr);
    column-gap: 0;
    align-items: stretch;   /* la columna necesita la altura de la fila */
  }

  /* El fondo y la linea de la COLUMNA los pinta el padre, no la barra.
     Motivo medido: la cabecera se auto-esconde al bajar (`nav.hm-hdr.is-oculto`,
     top:-73). Con la barra pegada en `top: 73px` eso abre una franja de 73 px
     por encima de ella; si el blanco y el filete fueran de la barra, la franja
     ensenaria el fondo de la pagina y la linea quedaria cortada a media altura.
     Pintada por `.sumi-cuerpo::before` la columna se lee continua siempre. */
  .ahsumi.ahsumi--lado > .sumi-cuerpo::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 320px;
    background: var(--nav-fondo, #fff);
    border-right: 1px solid var(--nav-linea, #D5DCE5);
    pointer-events: none;
  }

  /* -- 3. la barra: pegada, a toda la altura, con su propio scroll ----------
     (0,3,0) a proposito: le tiene que ganar a `.mcf.sumi-lado` (0,2,0) del
     bloque de 921 px, que esta declarado ANTES en esta misma hoja.
     La barra se pega a `--hm-cab-h`, la altura VISIBLE de la cabecera (ver el
     bloque de arriba), no a la altura propia de la cabecera: al bajar, la
     cabecera se va entera y la barra sube con ella. */
  .ahsumi.ahsumi--lado .sumi-lado {
    position: sticky;
    top: var(--hm-cab-h, 73px);
    height: calc(100vh - var(--hm-cab-h, 73px));
    /* 200 ms lineales: los MISMOS que el `transform` de `nav.hm-hdr` en
       cromo_v3.css, para que la barra y la cabecera se muevan a la par y no
       una detras de la otra.
       SOLO `top`, no `height`: el borde que se ve moverse es el de arriba, y el
       de abajo es el canto de la ventana, donde no hay nada que mirar. Animar
       tambien la altura obligaria a relayout de una caja con scroll propio y
       ~1,175 renglones en cada cuadro de la transicion, y no se ve. */
    transition: top 200ms linear;
    max-height: none;
    overflow: auto;
    overscroll-behavior: contain;   /* al topar, la pagina no arranca a moverse */
    scrollbar-width: thin;
    box-sizing: border-box;
    margin: 0;
    padding: 16px 0 40px;
    background: transparent;        /* lo pinta el ::before del padre */
    border: 0;
    border-radius: 0;
  }
  /* El apagado va AQUÍ y no en el bloque de `prefers-reduced-motion` de más
     arriba: aquel está declarado ANTES y con la misma especificidad (0,3,0),
     así que la regla de la transición le ganaba por orden. Medido con
     `reduced_motion: reduce`: seguía diciendo `top, height / 0.2s, 0.2s`.
     El SALTO es lo que pidió quien puso «reduce»; lo que no se puede es
     devolverle el hueco. */
  @media (prefers-reduced-motion: reduce) {
    .ahsumi.ahsumi--lado .sumi-lado { transition: none; }
  }

  .ahsumi.ahsumi--lado .sumi-lado::-webkit-scrollbar { width: 10px; }
  .ahsumi.ahsumi--lado .sumi-lado::-webkit-scrollbar-thumb {
    background: var(--nav-linea, #D5DCE5); border-radius: 999px;
    border: 3px solid var(--nav-fondo, #fff);
  }
  .ahsumi.ahsumi--lado .sumi-lado::-webkit-scrollbar-track { background: transparent; }

  /* La columna mide 320 px de fuera a fuera y el aire lateral lo ponen ya los
     renglones (`.sumi-g-h`, `.sumi-vals`: 16 px), asi que la barra solo pone el
     de arriba y abajo: sumar 16 px aqui dejaria los renglones a 32 px de cada
     lado y las diez formas del inserto en celdas de ~44 px - exactamente el
     estrujon que el 16-ago obligo a subir la columna de 320 a 364. */
  .ahsumi.ahsumi--lado .sumi-lado-h { position: sticky; top: 0; z-index: 2; border-radius: 0; }

  /* -- 4. la columna de contenido ------------------------------------------
     Tope de 2,200 px al CONTENIDO, no al contenedor: topar el contenedor
     despegaria la barra del borde en un monitor ancho, que es justo lo que este
     cambio viene a arreglar. A 2560 px la columna se queda en 2,200 y la
     rejilla da 8 tarjetas; a 1920 y 1440 el tope ni se toca. */
  .ahsumi.ahsumi--lado > .sumi-cuerpo > .sumi-main {
    box-sizing: border-box;
    max-width: 2200px;
    padding: 8px 32px 40px;
  }
  /* La cabecera de la pagina (migas, H1, descripcion, chips, "Filtra los N
     codigos") ahora vive DENTRO de esta columna: la escriben ahi los cinco
     generadores. Solo hay que devolverle el aire de arriba que le daba el
     contenedor. */
  .ahsumi.ahsumi--lado .sumi-main > .sumi-cab { padding-top: 8px; }

  /* Lo que va DESPUES del cuerpo - "Otras familias" en /productos, "Explorar
     por serie" en /sumitomo, la copia movil del boton - se queda donde estaba
     (Mario no pidio moverlo; en la maqueta subio al encabezado por un efecto
     colateral del JS de prueba, no por diseno). Como el contenedor ya no tiene
     aire lateral, se lo ponemos aqui. */
  .ahsumi.ahsumi--lado > *:not(.sumi-cuerpo) { padding-left: 32px; padding-right: 32px; }
}