/* AHNSA — selector de MEDIDAS de la ficha (/productos/<fam>/p/<cod>), 1-sep-2026.
   ---------------------------------------------------------------------------
   Hoja PROPIA y no reglas dentro de css/ahnsa-prod.css ni de css/ahnsa-ficha.css,
   a proposito: `ahnsa-prod.css` lo piden las 20 paginas de familia (que NO llevan
   selector) y `ahnsa-ficha.css` lo emiten ademas gen_amec/gen_kyocera/gen_ntk/
   gen_sumitomo, o sea decenas de miles de fichas de marca que tampoco lo llevan.
   Subir el ?v= de cualquiera de las dos obligaria a regenerar todas esas paginas
   para servir CSS que no usan; este archivo lo pide UNA sola pagina,
   productos/_producto.html, que es de mano. Su version canonica vive en
   tools/activos_sin_generador.py (verifica_frescura, seccion 4).

   Pisos MOVILES (auditoria del 29-ago): area tactil >= 44x44 px a 390 px de
   ancho y texto >= 12 px. Se cumplen con min-height/padding, no con `zoom`. */

.ahf-med {
  margin: 10px 0 4px;
  display: block;
}
.ahf-med-l {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5A6A93;
  margin: 0 0 6px;
}
.ahf-med-n {
  font-weight: 600;
  color: #5A6A93;
  text-transform: none;
  letter-spacing: 0;
}

/* ── hasta 12 medidas: fichas de toque ─────────────────────────────────── */
.ahf-med-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ahf-med-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #C9D3E8;
  border-radius: 10px;
  background: #FFF;
  color: #0A1E5E;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: border-color .12s ease, background-color .12s ease;
}
.ahf-med-chip:hover,
.ahf-med-chip:focus-visible {
  border-color: #0A1E5E;
  background: #F2F6FF;
}
.ahf-med-chip[aria-current="true"] {
  background: #0A1E5E;
  border-color: #0A1E5E;
  color: #FFF;
  cursor: default;
}

/* ── mas de 12: un <select> (el grupo mayor tiene 619 medidas) ──────────── */
.ahf-med-sel {
  min-height: 44px;
  width: 100%;
  max-width: 460px;
  padding: 10px 12px;
  border: 1px solid #C9D3E8;
  border-radius: 10px;
  background: #FFF;
  color: #0A1E5E;
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.ahf-med-sel:focus-visible {
  border-color: #0A1E5E;
  outline: 2px solid #0A1E5E;
  outline-offset: 1px;
}

/* ── estados ───────────────────────────────────────────────────────────── */
.ahf-med[data-cargando="1"] .ahf-med-row,
.ahf-med[data-cargando="1"] .ahf-med-sel {
  opacity: .55;
  pointer-events: none;
}
/* El aviso de fallo. NUNCA sustituye a la ficha: el producto actual se queda
   pintado y esto explica, en una linea, por que no se cambio de medida. */
.ahf-med-aviso {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: #8A3B12;
}
.ahf-med-aviso:empty {
  display: none;
}
/* El anuncio para lector de pantalla: existe, se lee, no se ve. */
.ahf-med-voz {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ahf-med-chip { transition: none; }
}

/* ── DESCRIPCION DEL CATALOGO del fabricante (3-sep-2026, Mario: «la descripción
      está en el catálogo») ────────────────────────────────────────────────────
   El ENCABEZADO DE SECCION IMPRESO del catálogo, tal cual, y debajo EN GRIS su
   procedencia (documento + página impresa). Vive en ESTA hoja y no en
   css/ahnsa-ficha.css por la misma razón que el selector de medidas: el bloque
   sólo lo pinta js/ahnsa-ficha-molde.js cuando el adaptador de /productos
   (js/ahnsa-producto.js) le pasa `descCatalogo`, y ese adaptador sólo corre en
   productos/_producto.html. Subir el ?v= de ahnsa-ficha.css obligaría a
   regenerar decenas de miles de fichas de marca para servir CSS que no usan. */
.ahf-catdesc {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-left: 3px solid var(--nav-linea);
  background: var(--nav-fondo-2, transparent);
  border-radius: 0 6px 6px 0;
}
.ahf-catdesc-l {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nav-tinta-3);
  margin: 0 0 3px;
}
.ahf-catdesc-t {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--nav-tinta);
}
.ahf-catdesc-f {
  margin: 3px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--nav-conteo);
}