/* ═══════════════════════════════════════════════════════════════════════════
AHNSA — navegador de catálogo
El sistema de McMaster-Carr, con la paleta y el idioma de AHNSA.
───────────────────────────────────────────────────────────────────────────
QUÉ SE COPIA Y POR QUÉ
----------------------
McMaster vende 800,000 piezas y su navegación se siente instantánea. No es
magia: **la UI de filtros es una función pura de un modelo JSON**. Mandan el
árbol de decisión completo al navegador y dejan que él recalcule. Eso es lo
que se replica aquí, y en un punto los superamos: ellos NO pueden recalcular
los conteos del lado del cliente (su `partNumberBitset` va ofuscado en
base64); nosotros somos dueños del dato y sí podemos.
Las cuatro reglas medidas en su CSS que valen su peso en oro:
1. Los valores son TEXTO, no controles. Ni checkbox, ni pastilla, ni
select. Un checkbox cuesta ~20 px por renglón; a 26 atributos × 11
valores eso es pantalla y media de nada.
2. Seleccionado = palomita + sangría de 20 px. NO una pastilla rellena. El
renglón no cambia de alto ni de color, así que **la lista nunca se
reacomoda** al elegir. Es la diferencia entre un filtro que se siente
sólido y uno que brinca.
3. Exactamente 11 valores y luego "ver más". Tope duro.
4. "Quitar" vive absoluto en la esquina del atributo y está en
`display:none` hasta que ese atributo tiene selección. Cero cromo hasta
que sirve.
LOS DOS ACENTOS
---------------
Lo más inteligente de su paleta es que tienen DOS acentos con trabajos
distintos y ninguno invade al otro:
verde #336633 = navegar (ligas, encabezados)
ámbar #fed700 = estás aquí (renglón actual)
morado #8c00c8 = ya lo viste
Traducirlo a AHNSA tiene una trampa: nuestro acento es azul y el marino es
azul, así que si "navegar" y "estás aquí" fueran los dos azules, el sistema
se colapsa a un solo acento y se pierde justo lo que lo hace funcionar.
Por eso "estás aquí" es ÁMBAR. No es un capricho: el carburo recubierto es
dorado, sale dorado en todas nuestras fotos de producto, y es el único color
cálido que este sitio ya tenía. El ámbar no compite con el marino, lo señala.
El morado de "visitado" es un guiño de 1995 a propósito. En un catálogo de
21,564 piezas, "¿ya vi esta?" es una pregunta real, y la respuesta más barata
que existe son 3 bytes de color.
═══════════════════════════════════════════════════════════════════════════ */
.ahnav {
/* tinta */
--nav-tinta: #14213D; /* texto principal 15.1:1 sobre blanco */
--nav-tinta-2: #4A5666; /* secundario 8.2:1 */
--nav-tinta-3: #6B7684; /* terciario 5.0:1 */
--nav-conteo: #78838F; /* conteos 4.6:1 */
/* estructura */
--nav-linea: #D5DCE5;
--nav-linea-2: #EDF1F6;
--nav-fondo: #FFFFFF;
--nav-lavado: #F4F7FB; /* hover / zebra */
/* acento 1 — NAVEGAR */
--nav-marino: #0A1E5E; /* encabezados de atributo 14.0:1 */
--nav-liga: #0F4C7A; /* ligas 8.3:1 */
--nav-liga-alta: #1878B9; /* hover de liga */
/* acento 2 — ESTÁS AQUÍ */
--nav-aqui: #B26A00; /* texto sobre claro: ámbar oscuro, 4.8:1 */
--nav-aqui-vivo: #F2A93B; /* el ámbar como relleno / barra */
--nav-aqui-suave: #FFF4E0; /* banda de fondo */
/* acento 3 — YA LO VISTE */
--nav-visto: #6B3FA0; /* 6.5:1 */
color: var(--nav-tinta);
background: var(--nav-fondo);
/* 13 px, no 16. Un comprador compara 40 piezas casi idénticas en 12
dimensiones: el trabajo es que quepan en una pantalla, no que se lean
cómodas. McMaster usa 12 px en TODO; 13 es nuestra concesión, y el piso
duro de 12 px del sitio se respeta en los conteos. */
font-size: 13px;
line-height: 1.4;
}
/* Los números SIEMPRE tabulares: es lo que hace que los puntos decimales se
apilen en columna y que 8.5 y 12.7 se puedan comparar de un vistazo. */
.ahnav [data-num], .ahnav .nav-conteo, .ahnav td.num, .ahnav th.num {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ───────────────────────────────────────────────────────────────────────────
ENCABEZADO DE LA FAMILIA
─────────────────────────────────────────────────────────────────────────── */
.ahnav-cab { padding: 0 0 14px; }
.ahnav-migas {
font-size: 12px; color: var(--nav-tinta-3); margin: 0 0 8px;
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.ahnav-migas a { color: var(--nav-liga); text-decoration: none; }
.ahnav-migas a:hover { color: var(--nav-liga-alta); text-decoration: underline; }
.ahnav-migas span[aria-hidden] { color: var(--nav-conteo); }
.ahnav-titulo {
font-size: clamp(24px, 3vw, 32px); line-height: 1.1; margin: 0 0 4px;
color: var(--nav-marino); font-weight: 800; letter-spacing: -.01em;
}
.ahnav-sub { margin: 0 0 2px; color: var(--nav-tinta-2); max-width: 62ch; }
.ahnav-cuenta { margin: 6px 0 0; color: var(--nav-tinta-2); font-size: 13px; }
.ahnav-cuenta b { color: var(--nav-marino); font-weight: 700; }
/* ───────────────────────────────────────────────────────────────────────────
GRUPOS DE INTENCIÓN — el piso de arriba que faltaba
---------------------------------------------------------------------------
Esto es lo que McMaster tiene y nosotros no teníamos: en vez de mandar al
visitante a 3,976 insertos con filtros, lo mandan a ~7 grupos con nombre
humano y una línea de CUÁNDO usarlo. No es un filtro: es alguien decidiendo
por ti. El conteo en cada tarjeta es el punto — siempre sabes qué tan grande
es el cuarto antes de entrar.
─────────────────────────────────────────────────────────────────────────── */
.ahnav-grupos { margin: 0 0 26px; }
.ahnav-grupos-h {
font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
color: var(--nav-marino); font-weight: 700; margin: 0 0 10px;
padding-bottom: 6px; border-bottom: 2px solid var(--nav-marino);
}
.ahnav-tiles {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
gap: 1px; background: var(--nav-linea-2);
border: 1px solid var(--nav-linea-2);
}
.ahnav-tile > a {
display: flex; flex-direction: column; gap: 3px; height: 100%;
background: var(--nav-fondo); padding: 11px 13px; text-decoration: none;
color: var(--nav-tinta); transition: background .12s ease;
}
.ahnav-tile > a:hover { background: var(--nav-lavado); }
.ahnav-tile > a:focus-visible { outline: 2px solid var(--nav-liga-alta); outline-offset: -2px; }
.ahnav-tile-t { color: var(--nav-liga); font-weight: 700; font-size: 14px; }
.ahnav-tile > a:hover .ahnav-tile-t { color: var(--nav-liga-alta); }
.ahnav-tile > a:visited .ahnav-tile-t { color: var(--nav-visto); }
.ahnav-tile-c { color: var(--nav-tinta-3); font-size: 12px; line-height: 1.35; }
.ahnav-tile-n { margin-top: auto; padding-top: 5px; color: var(--nav-conteo); font-size: 12px; }
/* ───────────────────────────────────────────────────────────────────────────
BARRA DE SELECCIÓN
Aparece sólo cuando hay algo elegido. Es la banda ámbar: "estás aquí".
─────────────────────────────────────────────────────────────────────────── */
.ahnav-sel {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
background: var(--nav-aqui-suave); border: 1px solid #EFD9B0;
border-left: 3px solid var(--nav-aqui-vivo);
padding: 8px 12px; margin: 0 0 14px; font-size: 12px;
}
.ahnav-sel[hidden] { display: none; }
.ahnav-sel-r { font-weight: 700; color: var(--nav-aqui); }
.ahnav-ficha {
display: inline-flex; align-items: center; gap: 7px;
background: var(--nav-fondo); border: 1px solid var(--nav-linea);
padding: 3px 5px 3px 8px; border-radius: 3px;
}
.ahnav-ficha i { font-style: normal; color: var(--nav-tinta-3); }
.ahnav-ficha b { font-weight: 600; color: var(--nav-tinta); }
.ahnav-ficha button {
border: 0; background: none; cursor: pointer; color: var(--nav-tinta-3);
font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 3px;
}
.ahnav-ficha button:hover { color: #B3261E; background: #FDECEA; }
.ahnav-limpiar {
margin-left: auto; background: none; border: 0; cursor: pointer;
color: var(--nav-liga); text-decoration: underline; font: inherit; padding: 4px;
}
.ahnav-limpiar:hover { color: var(--nav-liga-alta); }
/* ───────────────────────────────────────────────────────────────────────────
LA REJILLA DE FILTROS ("spec search")
─────────────────────────────────────────────────────────────────────────── */
.ahnav-filtros {
display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr));
border-top: 1px solid var(--nav-linea); border-left: 1px solid var(--nav-linea);
margin: 0 0 22px;
}
.ahnav-at {
border-right: 1px solid var(--nav-linea); border-bottom: 1px solid var(--nav-linea);
padding: 9px 11px 11px; position: relative; min-width: 0;
}
.ahnav-at-h {
font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
color: var(--nav-marino); font-weight: 700; margin: 0 0 7px;
padding-right: 42px; line-height: 1.25;
}
.ahnav-at-u { color: var(--nav-conteo); font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Regla 4: cero cromo hasta que sirve. */
.ahnav-at-x {
position: absolute; top: 8px; right: 10px; font-size: 11px;
color: var(--nav-tinta-3); background: none; border: 0; cursor: pointer;
display: none; padding: 2px 4px; text-decoration: underline;
}
.ahnav-at.con-sel .ahnav-at-x { display: block; }
.ahnav-at-x:hover { color: #B3261E; }
.ahnav-vals { list-style: none; margin: 0; padding: 0; }
/* Regla 3: tope duro de 11, en CSS, sin JS. */
.ahnav-val:nth-child(n+12) { display: none; }
.ahnav-at.abierto .ahnav-val:nth-child(n+12) { display: block; }
.ahnav-val { margin: 0; }
.ahnav-v {
display: flex; align-items: center; gap: 7px; width: 100%;
background: none; border: 0; padding: 2px 0; margin: 0;
font: inherit; color: var(--nav-tinta); cursor: pointer; text-align: left;
border-radius: 2px;
}
/* Regla 1: los valores son texto. Hover = subrayado, como una liga. */
.ahnav-v:hover .ahnav-v-t { color: #000; text-decoration: underline; }
.ahnav-v:focus-visible { outline: 2px solid var(--nav-liga-alta); outline-offset: 1px; }
/* Regla 2: palomita + sangría. Ni cambia de alto, ni de fondo, ni reacomoda. */
.ahnav-val.on .ahnav-v {
padding-left: 17px; font-weight: 600; color: #000;
background: url("data:image/svg+xml;utf8,") left 1px center / 11px no-repeat;
}
.ahnav-v-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ahnav-v-n { margin-left: auto; color: var(--nav-conteo); font-size: 12px; flex: none; }
/* Valor que dejaría cero resultados. Decisión de Mario, y tenía razón: NO se
apaga en gris, se QUITA. Cuarenta renglones apagados son ruido, no
información. La clase queda por si alguna vista quiere lo contrario. */
.ahnav-val.vacio { display: none; }
.ahnav-mas {
margin-top: 5px; background: none; border: 0; padding: 2px 0;
color: var(--nav-liga); cursor: pointer; font: inherit; font-size: 12px;
text-decoration: underline;
}
.ahnav-mas:hover { color: var(--nav-liga-alta); }
/* ───────────────────────────────────────────────────────────────────────────
LAS SILUETAS — geometría, en azul, que cambia al pasar el dedo encima
---------------------------------------------------------------------------
Mario, textual: "los sketches ... la forma de los insertos en la área de
filtros hazlos azul y cuando haces hover que cambie de color".
Para que un SVG cambie de color con CSS tiene que estar EN el documento. Un
`` no hereda `color` — se pinta negro y ahí se queda.
Por eso las siluetas van como sprite `` incrustado una sola vez y
cada valor las invoca con `
` no hereda `color` — se pinta negro y ahí se queda.
Por eso las siluetas van como sprite `