/* AHNSA — ficha de producto, MOLDE ÚNICO (mockup v8, 2026-08-22). * ============================================================================ * La pinta js/ahnsa-ficha-molde.js para los cinco adaptadores (/productos, * Sumitomo, Kyocera, AMEC, NTK). Tokens heredados de .ahnav (ahnsa-nav.css): * azul AHNSA #1878B9 / #0F4C7A, marino #0A1E5E, tinta #14213D. Inter. * Números SIEMPRE tabulares. Móvil primero; el grid crece por áreas. * * Regla de Mario: NADA se empalma. Toda etiqueta tiene su caja, los textos * largos cortan con ellipsis o hacen wrap dentro de su celda, y las cotas del * visual se atenúan (no se mueven) cuando una se enciende. * ========================================================================== */ .ahf { max-width: 1460px; margin: 0 auto; padding: 10px 20px 40px; color: var(--nav-tinta); } .ahf * { box-sizing: border-box; } .ahf .num, .ahf td.num, .ahf .ahf-tira-v.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } .ahf h1, .ahf h2, .ahf h3 { font-family: inherit; } /* la plantilla trae `.fam-main h2` grande: aquí las h2 son rótulos de bloque */ .ahf h2, .ahf h2.ahf-h2 { font-size: 16px; font-weight: 800; color: var(--nav-marino); margin: 0 0 10px; line-height: 1.25; letter-spacing: -.005em; } .ahf h3, .ahf h3.ahf-h3 { font-size: 13px; font-weight: 700; color: var(--nav-tinta-2); margin: 0 0 8px; line-height: 1.3; } .ahf-migas { margin: 4px 0 12px; } .ahf-migas-aqui { color: var(--nav-tinta-2); font-weight: 600; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ahf-nota { margin: 8px 0 0; font-size: 12px; color: var(--nav-conteo); line-height: 1.45; } /* ── rejilla por áreas ───────────────────────────────────────────────────── */ .ahf-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "cab" "izq" "der" "cuerpo"; gap: 18px; align-items: start; } .ahf-izq { grid-area: izq; display: grid; gap: 16px; min-width: 0; } .ahf-cab { grid-area: cab; min-width: 0; } .ahf-der { grid-area: der; min-width: 0; display: grid; gap: 14px; } .ahf-cuerpo { grid-area: cuerpo; min-width: 0; } @media (min-width: 860px) { .ahf-grid { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); grid-template-areas: "izq cab" "izq der" "cuerpo cuerpo"; gap: 22px 26px; } } @media (min-width: 1200px) { .ahf-grid { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr) 320px; grid-template-areas: "izq cab der" "izq cuerpo der"; gap: 22px 26px; } /* v12 (4-sep): pegada a la altura VISIBLE de la cabecera (--hm-cab-h, en ahnsa-hims.css v85), no a 86 px fijos: al bajar, la cabecera se va entera y la columna dejaba 86 px muertos encima de «Tu pedido» (medido a 1440x900 con scroll 600: nav.bottom = 0, .ahf-der.top = 86). Mismo hueco que el listado (8e13604) y misma cura: 200 ms lineales = el transform de nav.hm-hdr. */ .ahf-der { position: sticky; top: calc(var(--hm-cab-h, 73px) + 13px); transition: top 200ms linear; } @media (prefers-reduced-motion: reduce) { .ahf-der { transition: none; } } } @media (min-width: 1440px) { /* La columna del dibujo era FIJA en 420 px, así que en una pantalla de 1920 el croquis técnico seguía viéndose en una caja de 390 px de ancho (420 menos el padding de la tarjeta) y con barra de desplazamiento horizontal, porque el SVG pide 490 de mínimo. Medido: contenedor 390 y svg 490 tanto a 1440 como a 1920, o sea que la pantalla grande no aportaba ni un píxel al dibujo. Con `clamp` la columna crece con la ventana entre 420 y 640, y a 1440 ya cabe el croquis entero sin barra. */ .ahf-grid { grid-template-columns: clamp(420px, 38vw, 640px) minmax(0, 1fr) 330px; gap: 22px 28px; } } /* ── galería ─────────────────────────────────────────────────────────────── */ /* `min-width: 0` NO es cosmetica: sin el, la galeria TAPA el titulo del producto. Un elemento de rejilla trae `min-width: auto`, o sea que se niega a encoger por debajo de su min-content — y el min-content de esta caja son 490 px, que salen de la tira de 5 pestanas (5 x 84 px + huecos = 460, mas 30 de marco y relleno). Su columna mide 420 px, asi que se desbordaba 70 y se comia el principio de cada renglon de la columna central: la «CN» del codigo, el logo de la marca y la banda de existencia. Medido el 31-ago en produccion: el solape crece al estrechar la ventana — 42 px a 1440, 64 a 1366 y 1280, 84 a 1100 — porque la columna encoge y la galeria no. La tira ya tiene `overflow-x: auto`; lo que le faltaba era permiso para ser mas angosta que su contenido, y eso lo da `min-width: 0` en las dos. */ .ahf-gal { border: 1px solid var(--nav-linea); border-radius: 12px; background: var(--nav-fondo); padding: 14px; position: relative; min-width: 0; } .ahf-gal-main { position: relative; min-height: 260px; display: flex; align-items: center; justify-content: center; } @media (min-width: 860px) { .ahf-gal-main { min-height: 360px; } } .ahf-gal-main > div { width: 100%; } .ahf-gal-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; width: 100%; background: #fff; } .ahf-gal-img img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; display: block; } .ahf-gal-img.neutro { background: var(--nav-lavado); border-radius: 8px; aspect-ratio: 4 / 3; } .ahf-gal-croquis { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 1 / 1; width: 100%; padding: 8%; color: var(--nav-marino); --sk-relleno: #fff; } .ahf-gal-croquis .ahf-sk.grande { width: 100%; max-width: 360px; height: auto; } /* v9 (2-sep): el croquis TECNICO con cotas (AHNSA_CROQUIS.dibuja) vive en .ahf-gal-croq, que hasta hoy no tenia regla y heredaba el ancho de la galeria. El texto del SVG escala con el viewBox: px = font-size x ancho servido / viewBox. En una galeria angosta un croquis de herramienta (viewBox 760) servia sus cotas a 7.8 px las grandes y 6.6 px las chicas, por debajo de los 9 px legibles: ese era el «data label que no se lee» que Mario reporto dos veces. Se fija un ancho MINIMO de 490 px (a 490 las mismas cotas dan 10.6 / 9.0) y, cuando la galeria es mas angosta, la FIGURA se desplaza en horizontal -- la pagina no --, como una tabla ancha. Es preferible a encoger la cota hasta que deje de leerse. OJO: .ahf-gal-croquis (con -uis) es OTRA caja, la silueta de forma 100x100, y no se toca. */ .ahf-gal-croq { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } /* 4-sep (FOTOS, con adelante del MAESTRO): FUERA el min-width de 490 px. Se puso cuando la letra era 16.5 px sobre 640 (9.5 px a 370); desde 9158842 la letra va a 19 px DENTRO del SVG: a 370 px (galeria de escritorio) son 11 px y a 317 (movil) 9.4 px, legibles sin scroll. Con el minimo, 120-173 px del dibujo quedaban detras del scroll y SEGURIDAD lo midio en produccion como «rotulo cortado» en VBGW160402PDS01535, TLC05676, DNMG150412N-GU-AC8115P y 22000830 (los cuatro con 0 textos fuera del viewBox: lo cortado era el SVG). */ .ahf-gal-croq > svg { display: block; width: 100%; height: auto; } .ahf-gal-croquis-t { font-size: 12px; color: var(--nav-tinta-3); text-align: center; } /* ── data labels del croquis (Mario 3-sep 00:53: «el texto data labels no se lee muy bien, cambiar font y colores para TODOS») ─────────────────────── Tres cosas medidas, no supuestas: · TIPOGRAFIA. El motor pide `Inter, "Segoe UI", system-ui` y el sitio corre en `supreme`. Inter no se carga, asi que la cota salia en Segoe UI: otra letra que el resto de la pagina, en la misma tarjeta. · CONTRASTE. El color pintado es el marino #0A1E5E (muestreado del pixel, no leido del codigo: el motor declara #1A1A1A y la pagina lo gana). Sobre blanco da 15.97:1, de sobra; sobre el relleno de la pieza da 2.09:1, por debajo del 4.5 que pide WCAG AA. O sea que la etiqueta se lee o no segun por donde pase, que es exactamente lo que se ve. · TAMANO. 16.5 px de usuario en un viewBox de 640 dentro de una caja de 390 llegan al ojo como 10.1 px. El arreglo NO inventa un patron nuevo: es el MISMO que `.ahvis-cota text` ya usaba en el motor visual desde hace semanas (halo blanco con `paint-order`), ahora tambien en el croquis, para que los dos motores se vean iguales. */ /* El `fill` calculado de estas etiquetas era `none` porque la HOJA DEL SPRITE de formas (inline en la ficha) declara un `.dt{fill:none;stroke-width:3; stroke-dasharray:100}` global, y el motor llamaba `.dt` a sus rotulos. Esta hoja lo tapaba SOLO en .ahf-gal-croq (el inserto); el croquis de herramienta vive en .ahvis-lienzo y salia hueco y punteado (medido en D1115202, 4-sep). 4-sep (CROQUIS-1): el motor (tools/croquis_cad.py _ESTILO y su espejo js/ahnsa-croquis.js) ya lleva clases PROPIAS (`cq-t1`/`cq-t2`/`cq-cart`) con relleno, halo, `stroke-dasharray:none` y su tamano (24/21/18 u sobre viewBox ~600 = 14.8/12.95/11.1 px a 370 y 12.7/11.1/9.5 a 317) DENTRO del SVG. Aqui ya no se declara nada: el override de 19/16 px que vivia en este sitio hacia que el colocador de etiquetas midiera 21 y la pantalla pintara 19. */ .ahf-sk { display: inline-block; vertical-align: middle; color: var(--nav-marino); --sk-relleno: #fff; } .ahf-sk.celda { width: 26px; height: 26px; margin-right: 6px; flex: none; } .ahf-sk.tira { width: 22px; height: 22px; margin-right: 4px; } .ahf-sk.mini { width: 46px; height: 46px; } .ahf-sk.rel { width: 110px; height: 110px; } .ahf-sk-nd { stroke-dasharray: 3 3; } /* el visual (js/ahnsa-visual.js) vive dentro de la galería: sin marco propio, pestañas ocultas (las miniaturas las sustituyen), cotas atenuadas al resaltar */ .ahf .ahvis { border: 0; border-radius: 0; background: transparent; overflow: visible; } .ahf .ahvis-tabs { display: none; } .ahf .ahvis-lienzo { padding: 0; } .ahf .ahvis-svg { max-height: 420px; } .ahf .ahvis-chips { padding: 10px 0 0; } .ahf .ahvis-cotas.con-activa .ahvis-cota:not(.activa) { opacity: .28; } .ahf .ahvis-sello { padding: 8px 0 0; } .ahf-gal-ley { margin: 8px 0 0; font-size: 11.5px; color: var(--nav-conteo); line-height: 1.4; } .ahf-gal-ley.aviso { color: var(--nav-aqui); } .ahf-gal-ley.exacto::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--nav-liga-alta); margin-right: 6px; vertical-align: 1px; } .ahf-thumbs { display: flex; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--nav-linea-2); overflow-x: auto; min-width: 0; } .ahf-thumb { flex: none; width: 84px; border: 1.5px solid var(--nav-linea); border-radius: 8px; background: #fff; padding: 4px 4px 3px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--nav-tinta-3); } .ahf-thumb:hover { border-color: var(--nav-liga-alta); } .ahf-thumb.activa { border-color: var(--nav-liga-alta); box-shadow: 0 0 0 2px rgba(24, 120, 185, .18); } .ahf-thumb img, .ahf-thumb-svg { width: 64px; height: 64px; object-fit: contain; display: block; } .ahf-thumb .ahf-sk.mini { width: 56px; height: 56px; margin: 4px 0; } .ahf-thumb-n { font-size: 10.5px; font-weight: 600; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ahf-thumb-t { font-size: 11px; height: 64px; display: flex; align-items: center; } /* corazón de favoritos */ .ahf-fav { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--nav-linea); background: rgba(255, 255, 255, .94); color: var(--nav-tinta-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; } .ahf-fav svg { width: 18px; height: 18px; } .ahf-fav:hover { color: #B3261E; border-color: #E7B4B0; } .ahf-fav.on { color: #B3261E; } .ahf-fav.on svg { fill: #B3261E; } .ahf-fav-gal { top: 14px; right: 14px; } /* ── compatibilidad (izquierda) ──────────────────────────────────────────── */ .ahf-compat { border: 1px solid var(--nav-linea); border-radius: 12px; background: var(--nav-fondo); padding: 14px 16px; } .ahf-compat .ahf-h2 { margin-bottom: 4px; } .ahf-compat-lista { list-style: none; margin: 0; padding: 0; } .ahf-compat-fila { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--nav-linea-2); min-width: 0; } .ahf-compat-lista.completa .ahf-compat-fila { padding: 8px 0; } .ahf-compat-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ahf-compat-cod { font-size: 13px; font-weight: 700; color: var(--nav-tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ahf-compat-sub { font-size: 11.5px; color: var(--nav-tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ahf-compat-ver { flex: none; font-size: 12.5px; font-weight: 700; color: var(--nav-liga); text-decoration: none; padding: 4px 2px; } .ahf-compat-ver:hover { color: var(--nav-liga-alta); text-decoration: underline; } .ahf-compat-todos { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--nav-liga); text-decoration: none; } .ahf-compat-todos:hover { text-decoration: underline; color: var(--nav-liga-alta); } .ahf-compat-thumb { flex: none; width: 48px; height: 48px; border: 1px solid var(--nav-linea); border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; text-decoration: none; } .ahf-compat-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } .ahf-compat-thumb.neutro { background: var(--nav-lavado); } .ahf-compat-mini { font-size: 8px; font-weight: 700; line-height: 1.15; color: var(--nav-tinta-3); text-align: center; padding: 3px; word-break: break-all; overflow: hidden; max-height: 100%; } /* ── cabecera del centro ─────────────────────────────────────────────────── */ .ahf-marca { display: inline-flex; align-items: center; text-decoration: none; color: var(--nav-marino); min-height: 24px; max-width: 100%; } .ahf-marca.cab { margin: 2px 0 8px; } .ahf-marca img { height: 24px; width: auto; max-width: 180px; display: block; object-fit: contain; } .ahf-marca-t { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--nav-liga); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ahf-cod { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; color: var(--nav-marino); font-weight: 800; margin: 0 0 8px; word-break: break-word; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .ahf-fam { margin: 0 0 4px; font-size: 13.5px; color: var(--nav-tinta-2); } .ahf-fam-l { color: var(--nav-tinta-3); } .ahf-fam a { color: var(--nav-liga); text-decoration: none; font-weight: 600; } .ahf-fam a:hover { text-decoration: underline; } .ahf-desc { margin: 0 0 10px; font-size: 14px; color: var(--nav-tinta-2); line-height: 1.45; } .ahf-ambiguo { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 10px; font-size: 12px; color: var(--nav-aqui); background: var(--nav-aqui-suave); border-radius: 6px; padding: 6px 9px; line-height: 1.4; } .ahf-ambiguo svg { flex: none; width: 15px; height: 15px; margin-top: 1px; } .ahf-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; font-size: 13px; } .ahf-estado-sep { width: 1px; height: 16px; background: var(--nav-linea); } .ahf-mp-n { color: var(--nav-tinta-3); } .ahf-mp .num { font-weight: 700; color: var(--nav-tinta); } /* semáforo de BANDA (las tres del listado) */ .ahf-banda { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; margin: 0; white-space: nowrap; } .ahf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nav-conteo); flex: none; } .ahf-banda.hay { color: #1B5E20; } .ahf-banda.hay .ahf-dot { background: #2E7D32; } .ahf-banda.medio { color: #8A5A00; } .ahf-banda.medio .ahf-dot { background: #F2A93B; } .ahf-banda.surte { color: #8A5A00; } .ahf-banda.surte .ahf-dot { background: #F2A93B; } .ahf-banda.nd { color: var(--nav-tinta-3); font-weight: 600; } .ahf-banda-pocas { margin: 4px 0 0 16px; font-size: 12px; color: var(--nav-aqui); font-weight: 700; } .ahf-iso { margin: 0 0 14px; } .ahf-iso-l { display: block; font-size: 12px; font-weight: 700; color: var(--nav-tinta-2); margin-bottom: 6px; } .ahf-iso-row { display: flex; flex-wrap: wrap; gap: 6px; } .ahf .iso-mat { min-width: 30px; height: 28px; border-radius: 6px; font-size: 13px; text-decoration: none; } /* tira de cotas: una celda por medida, NADA se empalma */ .ahf-tira { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); border: 1px solid var(--nav-linea); border-radius: 8px; overflow: hidden; background: var(--nav-fondo); } .ahf-tira-c { padding: 8px 9px; border-right: 1px solid var(--nav-linea-2); border-bottom: 1px solid var(--nav-linea-2); min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ahf-tira-n { font-size: 11px; font-weight: 700; color: var(--nav-tinta-3); line-height: 1.25; overflow-wrap: anywhere; } .ahf-tira-v { font-size: 13.5px; font-weight: 700; color: var(--nav-tinta); display: flex; align-items: center; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; } .ahf-tira-v a { color: var(--nav-liga); text-decoration: none; } .ahf-tira-v a:hover { text-decoration: underline; } .ahf-parrafo { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--nav-tinta-2); max-width: 72ch; } /* ── tabs ────────────────────────────────────────────────────────────────── */ .ahf-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--nav-linea); margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; } .ahf-tabs::-webkit-scrollbar { display: none; } .ahf-tab { flex: none; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--nav-tinta-3); padding: 10px 14px; cursor: pointer; margin-bottom: -1px; white-space: nowrap; min-height: 42px; } .ahf-tab:hover { color: var(--nav-liga); } .ahf-tab.activa { color: var(--nav-liga); border-bottom-color: var(--nav-liga-alta); font-weight: 700; } .ahf-tab-panel[hidden] { display: none; } /* ── tabla técnica: 2 columnas de tablas ─────────────────────────────────── */ .ahf-tabla2 { display: grid; grid-template-columns: 1fr; gap: 0 24px; } @media (min-width: 640px) { .ahf-tabla2 { grid-template-columns: 1fr 1fr; } } .ahf-tabla { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid var(--nav-linea-2); border-radius: 8px; overflow: hidden; align-self: start; } .ahf-tabla2 > table:only-child { grid-column: 1 / -1; } .ahf-tabla th, .ahf-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--nav-linea-2); vertical-align: middle; text-align: left; } .ahf-tabla tr:last-child th, .ahf-tabla tr:last-child td { border-bottom: 0; } .ahf-tabla th { font-weight: 600; color: var(--nav-tinta-3); width: 48%; background: var(--nav-lavado); } .ahf-tabla td { font-weight: 600; color: var(--nav-tinta); overflow-wrap: anywhere; } .ahf-tabla td .ahf-sk.celda { float: none; display: inline-block; } .ahf-tabla tr[data-at] { cursor: pointer; } .ahf-tabla tr[data-at]:hover td { background: var(--nav-lavado); } .ahf-tabla tr.activa th, .ahf-tabla tr.activa td { background: var(--nav-aqui-suave); } .ahf-tabla tr.activa th { color: var(--nav-aqui); } .ahf-val { color: var(--nav-liga); text-decoration: none; } .ahf-val:hover { color: var(--nav-liga-alta); text-decoration: underline; } .ahf-val-nota { display: block; font-style: normal; font-weight: 500; font-size: 11px; color: var(--nav-conteo); } .ahf-tabla.simple th { width: 42%; } .ahf-extra { margin-top: 18px; } .ahf-descargas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 14px 0 0; } .ahf-fuente { font-size: 12.5px; color: var(--nav-tinta-3); } a.ahf-fuente { color: var(--nav-liga); } /* ── botones ─────────────────────────────────────────────────────────────── */ .ahf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; padding: 0 16px; border: 1.5px solid var(--nav-liga-alta); transition: background .12s ease, color .12s ease; } .ahf-btn svg { width: 18px; height: 18px; flex: none; } .ahf-btn.pri { background: var(--nav-liga-alta); color: #fff; border-color: var(--nav-liga-alta); } .ahf-btn.pri:hover { background: var(--nav-liga); border-color: var(--nav-liga); } .ahf-btn.sec { background: var(--nav-fondo); color: var(--nav-liga); } .ahf-btn.sec:hover { background: #EEF5FB; } .ahf-btn.sec.puesto { border-color: #2E7D32; color: #1B5E20; background: #EEF7EE; } .ahf-btn.chico { width: auto; min-height: 38px; font-size: 13px; padding: 0 14px; } .ahf-btn:focus-visible { outline: 2px solid var(--nav-liga-alta); outline-offset: 2px; } /* ── panel derecho ───────────────────────────────────────────────────────── */ .ahf-panel { border: 1px solid var(--nav-linea); border-radius: 12px; background: var(--nav-fondo); padding: 16px; display: grid; gap: 10px; } .ahf-panel-cab { display: flex; align-items: center; gap: 8px; } .ahf h2.ahf-panel-t { font-size: 15px; font-weight: 800; color: var(--nav-marino); margin: 0; } .ahf-sk.grande .tr { opacity: .3; } .ahf-panel-info { color: var(--nav-tinta-3); display: inline-flex; cursor: help; } .ahf-panel-info svg { width: 16px; height: 16px; } .ahf-lbl { font-size: 12.5px; font-weight: 600; color: var(--nav-tinta-2); } .ahf-qty { display: flex; align-items: center; gap: 0; } .ahf-q { width: 42px; height: 42px; border: 1px solid var(--nav-linea); background: var(--nav-fondo); color: var(--nav-marino); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px 0 0 8px; font-family: inherit; } .ahf-q + .ahf-n + .ahf-q { border-radius: 0 8px 8px 0; } .ahf-q:hover { border-color: var(--nav-liga-alta); color: var(--nav-liga-alta); } .ahf-n { width: 64px; height: 42px; text-align: center; border: 1px solid var(--nav-linea); border-left: 0; border-right: 0; font: inherit; font-size: 15px; font-weight: 700; color: var(--nav-tinta); background: var(--nav-fondo); font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .ahf-n::-webkit-outer-spin-button, .ahf-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ahf-qty-u { margin-left: 10px; font-size: 13px; color: var(--nav-tinta-3); } .ahf-dispo { border: 1px solid var(--nav-linea); border-radius: 10px; padding: 12px 14px; background: var(--nav-lavado); } .ahf-dispo .ahf-banda { font-size: 13.5px; } .ahf-promesa { margin: 6px 0 0; font-size: 12px; color: var(--nav-tinta-3); line-height: 1.4; } .ahf-panel-aviso { margin: 0; font-size: 12px; color: var(--nav-aqui); } .ahf-resumen { border: 1px solid var(--nav-linea); border-radius: 12px; background: var(--nav-fondo); padding: 14px 16px; display: grid; gap: 8px; } .ahf-resumen-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; color: var(--nav-marino); } .ahf-resumen-n { font-size: 13px; color: var(--nav-tinta-2); font-weight: 600; white-space: nowrap; } .ahf-resumen-ver { font-size: 13.5px; font-weight: 700; color: var(--nav-liga); text-decoration: none; } .ahf-resumen-ver:hover { text-decoration: underline; } /* ── relacionados (carrusel) ─────────────────────────────────────────────── */ .ahf-rel { margin-top: 26px; } .ahf-rel-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .ahf-rel-ver { font-size: 12.5px; font-weight: 700; color: var(--nav-liga); text-decoration: none; white-space: nowrap; } .ahf-rel-ver:hover { text-decoration: underline; } .ahf-rel-wrap { position: relative; } .ahf-rel-track { list-style: none; margin: 0; padding: 2px 2px 8px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .ahf-rel-card { flex: 0 0 178px; scroll-snap-align: start; position: relative; border: 1px solid var(--nav-linea); border-radius: 10px; background: var(--nav-fondo); min-width: 0; } .ahf-rel-a { display: flex; flex-direction: column; gap: 4px; padding: 12px; text-decoration: none; color: inherit; height: 100%; } .ahf-rel-a:hover .ahf-rel-cod { color: var(--nav-liga-alta); text-decoration: underline; } .ahf-rel-vis { height: 120px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 6px; } .ahf-rel-vis img { max-width: 120px; max-height: 120px; width: auto; height: auto; object-fit: contain; } .ahf-rel-vis .ahf-sk.rel { width: 100px; height: 100px; } .ahf-marca.rel { margin-top: 6px; min-height: 18px; } .ahf-marca.rel img { height: 16px; max-width: 120px; } .ahf-marca.rel .ahf-marca-t { font-size: 11px; } .ahf-rel-cod { font-size: 13px; font-weight: 800; color: var(--nav-liga); line-height: 1.25; overflow-wrap: anywhere; } .ahf-rel-cotas { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11.5px; color: var(--nav-tinta-2); } .ahf-rel-cota { white-space: nowrap; } .ahf-rel-cota-n { color: var(--nav-tinta-3); margin-right: 3px; } .ahf-fav-rel { top: 6px; right: 6px; width: 30px; height: 30px; } .ahf-fav-rel svg { width: 15px; height: 15px; } .ahf-rel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--nav-linea); background: #fff; color: var(--nav-liga); cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(10, 30, 94, .14); padding: 0; } .ahf-rel-nav svg { width: 18px; height: 18px; } .ahf-rel-nav.izq { left: -14px; } .ahf-rel-nav.der { right: -14px; } .ahf-rel-nav[hidden] { display: none !important; } @media (pointer: fine) and (min-width: 860px) { .ahf-rel-nav { display: inline-flex; } } .ahf-volver { display: inline-block; margin-top: 18px; color: var(--nav-liga); text-decoration: none; font-weight: 600; font-size: 13px; } .ahf-volver:hover { text-decoration: underline; } /* marco neutro: sin render honesto, el código. Nunca una foto de grupo. */ .ahf-neutro { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 200px; padding: 18px; text-align: center; background: var(--nav-lavado); border-radius: 8px; } .ahf-neutro.chico { min-height: 100px; width: 100%; padding: 8px; } .ahf-neutro-cod { font-size: 16px; letter-spacing: .3px; color: var(--nav-tinta-2); word-break: break-all; font-variant-numeric: tabular-nums; } .ahf-neutro.chico .ahf-neutro-cod { font-size: 11px; } /* ── cotas del visual (heredado) ─────────────────────────────────────────── */ .ahvis-cota line, .ahvis-cota polyline, .ahvis-cota circle { stroke: #1878B9; } .ahvis-cota text { fill: #0F4C7A; paint-order: stroke; stroke: #fff; stroke-width: 2.2px; stroke-linejoin: round; } .ahvis-cota { transition: opacity .15s ease; } .ahvis-cota.activa line, .ahvis-cota.activa polyline, .ahvis-cota.activa circle { stroke: #B26A00; stroke-width: 1.6; } .ahvis-cota.activa text { fill: #B26A00; font-weight: 800; } .ahvis-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .ahvis-chips-l { font-size: 11.5px; font-weight: 700; color: var(--nav-tinta-3); margin-right: 2px; } .ahvis-chip { border: 1px solid var(--nav-linea); border-radius: 999px; background: var(--nav-fondo); color: var(--nav-liga); font: 700 12px/1 inherit; font-family: inherit; padding: 7px 12px; min-height: 30px; cursor: pointer; } .ahvis-chip:hover { border-color: var(--nav-liga-alta); } .ahvis-chip.activa { background: var(--nav-aqui-suave); border-color: var(--nav-aqui); color: var(--nav-aqui); } .ahvis-svg { width: 100%; height: auto; display: block; } .ahvis-sello { margin: 0; font-size: 11.5px; color: var(--nav-conteo); } .ahvis-sello.exacto { color: var(--nav-liga); } /* badges ISO de material (P/M/K/N/S/H) — colores de la norma */ .iso-mat { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 5px; font-size: 12px; font-weight: 800; color: #fff; padding: 0 6px; } .iso-mat.p { background: #1565C0; } .iso-mat.m { background: #C9A227; color: #14213D; } .iso-mat.k { background: #B3261E; } .iso-mat.n { background: #2E7D32; } .iso-mat.s { background: #B26A00; } .iso-mat.h { background: #4A5666; } /* ── esqueleto (CLS) ─────────────────────────────────────────────────────── */ .ahprod-esq { padding-top: 6px; } .ahprod-esq-migas { height: 18px; width: 280px; margin-bottom: 10px; background: var(--nav-lavado); border-radius: 4px; } .ahprod-esq-foto { aspect-ratio: 1 / 1; max-height: 420px; background: var(--nav-lavado); border-radius: 12px; } .ahprod-esq-b { height: 16px; margin-bottom: 10px; background: var(--nav-lavado); border-radius: 4px; } .ahprod-esq-h1 { height: 30px; width: 60%; } .ahprod-esq-m { width: 40%; } .ahprod-esq-fila { height: 14px; margin-bottom: 8px; background: var(--nav-lavado); border-radius: 4px; } .ahprod-esq .ahprod-caja { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 26px; } @media (max-width: 760px) { .ahprod-esq .ahprod-caja { grid-template-columns: 1fr; } } /* ── móvil: toques cómodos, carrusel con el dedo ─────────────────────────── */ @media (pointer: coarse) { .ahf-tab { min-height: 46px; } .ahf-thumb { width: 88px; } .ahf-compat-ver { padding: 8px 6px; } } /* v17 (6-sep, ux-movil; Mario «que se vea optimo en movil»): los objetivos chicos de la ficha, que es la pagina que mas ve un cliente. NADA cambia de tamano: crece el AREA TACTIL con pseudos que no ocupan layout, el mismo patron que ya usa la pildora de la barra promo en hims.css. Medido en produccion a 390 px, y todo dentro de (pointer: coarse) porque es gesto y no layout. 1. EL VALOR DE LA TABLA TOMA SU CELDA. `a.ahf-val` mide 85.5 x 17 px dentro de una celda de 187.7 x 43: el enlace es el 4 % de lo que el ojo lee como el objetivo. Con el pseudo, el objetivo pasa a ser la celda entera —43 px de alto, los que ya tiene la fila— sin mover una sola caja de la tabla, que tiene 37 filas. Son 27 enlaces en esta ficha. `:only-child` para no pisar una celda con dos valores. 2. LO MISMO EN LA TIRA. `.ahf-tira-v a` mide 17.5 px de alto dentro de una celda de ~61: mismo defecto y mismo arreglo. Son 5 enlaces mas, y tambien medido: cero celdas de la tira con mas de un enlace. 3. CHIPS DE MATERIAL ISO. 30 x 28 px con 6 px entre ellos: pequenos Y pegados a la vez, que es la combinacion que de verdad hace fallar el pulgar. El hueco sube a 16 px (paso de 46) para que las areas de 44 no se enciman, y cabe: la fila mide 362 px y tiene 272 libres. 4. FAVORITOS. 36 x 36 en la galeria y 30 x 30 en las tarjetas relacionadas; nueve en la ficha. A 44 con el pseudo, que en una tarjeta de 160 x 232 es la esquina de siempre. 5. LA MIGA Y LA MARCA. El enlace «Inicio» mide 42.8 px de alto y su borde inferior queda a UN pixel del enlace de marca «NTK»: van a paginas distintas, asi que un toque en el borde te lleva a la que no era. Se separan 8 px. La marca NO se agranda: 28 x 24 ya cumple el minimo de WCAG 2.5.8 AA. Las chinchetas del mapa de /contacto NO se tocaron por la razon contraria y esta escrito en _entrega_diseno/UX_MOVIL_2026-09-06.md: ahi agrandar el area junta objetivos que ya se enciman. Aqui hay sitio; alli no. */ @media (pointer: coarse) { /* NO se toca el padding de la celda, y esto es una decision medida, no un olvido: la fila de una linea mide 35 px y llevarla a 44 pide 9 px mas por fila, o sea ~243 px mas de tabla en el panel visible: el cliente veria MENOS datos de la herramienta que vino a consultar. DECIDIDO por el MAESTRO el 6-sep y NO es tarea abierta; la razon de fondo es que estas filas no son CONTROLES sino DATOS — el minimo de 44 existe para lo que hay que acertar, no para lo que hay que mirar. Se reabre solo si algun dia se vuelven tocables (seleccionar, comparar o filtrar desde ahi). Lo que SI cambia es que el objetivo pasa de 85 x 17 (el texto) a 188 x 35 (la celda entera): 4.9 veces mas superficie, con CERO movimiento de layout. */ .ahf-tabla td { position: relative; } .ahf-tabla td > a.ahf-val::after { content: ''; position: absolute; inset: 0; } .ahf-tira-c { position: relative; } .ahf-tira-c a::after { content: ''; position: absolute; inset: 0; } .ahf-iso-row { gap: 1rem; } .iso-mat { position: relative; } .iso-mat::after { content: ''; position: absolute; inset: -8px -7px; } .ahf-fav::after { content: ''; position: absolute; inset: -4px; } /* 36 -> 44 */ .ahf-fav-rel::after { inset: -7px; } /* 30 -> 44 */ .ahf-marca.cab { margin-top: .75rem; } /* el hueco con la miga: 1 -> 11 px */ } @media (max-width: 559px) { .ahf { padding: 8px 14px 32px; } .ahf-tira { grid-template-columns: repeat(3, 1fr); } .ahf-cod { font-size: 21px; } .ahf-rel-card { flex-basis: 160px; } } /* ── impresión: la ficha en una hoja, sin cromo ni botones ───────────────── */ @media print { @page { margin: 14mm; } body { background: #fff !important; } .ah-usp, .global-styles--header, .ah-hdr, footer, .global-styles--footer, .ahf-der, .ahf-thumbs, .ahvis-chips, .ahf-tabs, .ahf-fav, .ahf-rel-nav, .ahf-descargas .ahf-btn, .ahf-volver, .ahf-compat-ver, .ahf-compat-todos, .ahnav-migas, [data-ah-mega], .ah-rec { display: none !important; } .ahf { max-width: none; padding: 0; color: #000; } .ahf-grid { display: block; } .ahf-izq { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin: 6mm 0; } .ahf-gal, .ahf-compat, .ahf-tabla, .ahf-tira, .ahf-rel-card { border-color: #999; break-inside: avoid; } .ahf-gal-main { min-height: 0; } .ahf-gal-img img, .ahvis-svg { max-height: 70mm; } .ahf-tab-panel[hidden] { display: block !important; } .ahf-tab-panel { break-inside: avoid; margin-bottom: 6mm; } .ahf-tabla th { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ahf-val { color: #000; text-decoration: none; } .ahf-rel-track { flex-wrap: wrap; overflow: visible; } .ahf-parrafo, .ahf-desc { max-width: none; } .ahf-cab::after { content: 'ahnsa.com · Cotiza por WhatsApp 81 3071 0671 · Precio y existencia por WhatsApp'; display: block; font-size: 10px; color: #555; margin-top: 4mm; } .iso-mat { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* v6 (30-ago): vista 'Cotas' — croquis Rive con las medidas del producto (molde v5). El canvas llena la caja de la galeria sobre blanco. */ .ahf-gal-rive { aspect-ratio: 4 / 3; background: #fff; display: flex; } .ahf-gal-rive canvas { width: 100%; height: 100%; display: block; } /* ═══ v8 (2026-09-02): BLOQUE DE DECISION + BARRA FIJA (encargo de Mario) ═══ El bloque de decision NO trae rejilla propia: `.ahf-der` ya cae arriba a la derecha en escritorio y debajo de la imagen en movil (ver `.ahf-grid`, mas arriba). Lo que se agrega aqui es el hueco del precio, el renglon de entrega, los blancos de toque y la barra fija. */ /* ── hueco del precio (#ahfPrecio) ───────────────────────────────────────── */ /* Con `tools/marcas_cobrables.json` vacia esto dice «Cotizar» en todas las fichas; con precio, el peso CON IVA es el numero grande y el dolar la referencia chica (art. 7 bis LFPC: el patron «$100 + IVA» esta prohibido). */ .ahf-precio { border: 1px solid var(--nav-linea); border-radius: 10px; padding: 12px 14px; background: #fff; } .ahf-precio[hidden] { display: none; } .ahf-precio-cot { display: grid; gap: 3px; } .ahf-precio-cot b { font-size: 20px; font-weight: 800; color: var(--nav-marino); letter-spacing: -.01em; } .ahf-precio-nota { font-size: 12px; color: var(--nav-tinta-3); line-height: 1.4; } .ahf-precio-n { display: flex; align-items: baseline; gap: 6px; } .ahf-precio-n .num { font-size: 28px; font-weight: 800; color: var(--nav-marino); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ahf-precio-u { font-size: 13px; font-weight: 600; color: var(--nav-tinta-3); } .ahf-precio-iva { margin: 2px 0 0; font-size: 11.5px; letter-spacing: .04em; color: var(--nav-tinta-3); } .ahf-precio-usd, .ahf-precio-paq { margin: 4px 0 0; font-size: 12.5px; color: var(--nav-tinta-2); font-variant-numeric: tabular-nums; } /* ── entrega y cobro: los dos literales del molde ────────────────────────── */ .ahf-envio { display: grid; gap: 3px; } .ahf-envio[hidden] { display: none; } .ahf-envio-l { margin: 0; font-size: 12.5px; color: var(--nav-tinta-2); line-height: 1.4; } .ahf-envio-l.bo { color: var(--nav-tinta-3); } .ahf-otras { margin: 0; font-size: 12.5px; text-align: center; color: var(--nav-tinta-3); } .ahf-otras a { color: var(--nav-liga); font-weight: 600; } /* Aviso de tienda en pruebas (Mario, 6-sep 14:2x). Lo enciende ahnsa-ficha-molde.js con la misma señal que el resto del panel (`window.__AHP.cobra()`), nunca un literal suelto. Se lee como una nota, no como una alarma: el precio es cierto y el pedido se puede dejar; lo que aún no hay es cobro en línea. Sin fondo de color ni icono de peligro a propósito. `[hidden]` explícito porque `display:flex/block` de un padre le gana al atributo (la lección del banner de cookies v81). */ .ahf-pruebas { margin: 2px 0 0; padding: 8px 10px; border: 1px solid var(--nav-borde, rgba(0, 0, 0, .12)); border-radius: 10px; font-size: 12px; line-height: 1.45; color: var(--nav-tinta-2); background: var(--nav-lavado, rgba(0, 0, 0, .025)); } .ahf-pruebas[hidden] { display: none; } .ahf-comprar[hidden] { display: none; } /* ═══ v9 (2026-09-03): EL PRECIO VIVE EN EL PANEL «COMPRAR» ═══════════════════ Mario, 3-sep 00:45, con la captura de /productos/brocas/p/0081ATF a la vista: «después el precio lo quiero en la misma caja de cotizar, por favor organizar mejor el UI de aquí en la derecha donde dice Comprar». Hasta v8 el número lo pintaba `js/ahnsa-precio.js` en la columna CENTRAL (`.ahp-f` dentro de `.ahf-cab`) y el panel de la derecha se quedaba con la cantidad y los botones: el precio estaba a media pantalla del botón que lo cobra, y el mismo importe aparecía dos veces en móvil (la caja del centro y la barra fija). Ahora el panel lleva la decisión ENTERA, en el orden de una tienda de verdad: 1 banda de existencia 2 precio 3 cómo se vende 4 entrega y pago 5 envío 6 cantidad + comprar 7 cotizar / asesoría (secundarios) Aquí NO hay color ni tipografía nuevos: todo sale de los tokens `--nav-*` que ya usa el resto de la ficha. Lo que cambia es el PESO — qué se lee primero. */ /* 1. La banda abre el panel: chip de estado, no caja con marco. El marco competía con el de la tarjeta y hacía tres bordes anidados. */ .ahf-panel > .ahf-dispo { border: 0; border-radius: 8px; padding: 8px 11px; background: var(--nav-lavado); } /* 2. El precio es el ancla visual del panel. Sin marco propio —ya vive dentro de la tarjeta— y cerrado por una línea fina que lo separa del resto. */ .ahf-panel > .ahf-precio { border: 0; border-radius: 0; background: transparent; padding: 2px 0 12px; border-bottom: 1px solid var(--nav-linea-2); } .ahf-precio-n .num { font-size: 32px; } .ahf-precio-u { font-size: 14px; } /* 3. Cómo se vende, pegado al precio (Mario 00:46). */ .ahf-precio-venta { margin: 9px 0 0; font-size: 12.5px; font-weight: 600; color: var(--nav-tinta-2); } /* 4. Entrega y pago: DOS renglones, no uno con un «·» en medio. Son dos datos distintos y en una caja de compra se leen por separado. */ .ahf-entrega { display: grid; gap: 2px; } .ahf-panel .ahf-promesa { margin: 0; font-size: 13px; font-weight: 600; color: var(--nav-tinta-2); line-height: 1.4; } .ahf-pago { margin: 0; font-size: 12.5px; color: var(--nav-tinta-3); line-height: 1.4; } .ahf-pago[hidden] { display: none; } /* 5. Envío: cierra el bloque de condiciones antes de la cantidad. */ .ahf-panel > .ahf-envio { padding-bottom: 12px; border-bottom: 1px solid var(--nav-linea-2); } /* 6-7. Jerarquía de acciones: UN primario relleno; los secundarios sin relleno y con la línea neutra, para que no compitan. El blanco de toque NO se toca (`.ahf-btn` sigue en 44 px, y 48 con `pointer: coarse`): menos peso visual no es menos superficie que tocar. */ .ahf-lbl { margin-top: 2px; } .ahf-btn.sec.suave { border-color: var(--nav-linea); color: var(--nav-liga); font-weight: 600; } .ahf-btn.sec.suave:hover { background: var(--nav-lavado); border-color: var(--nav-liga-alta); } /* El correo es la tercera vía y va como texto: se le da altura de toque para que en móvil no sea un renglón de 16 px imposible de acertar con el dedo. */ .ahf-otras a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; } /* ── blancos de toque: 44 px reales con el dedo ──────────────────────────── */ /* `.ahf-q` media 42 px, por debajo del minimo. Con `pointer: coarse` sube a 48 junto con el campo, que tiene que crecer con ellos o la caja se desalinea. */ @media (pointer: coarse) { .ahf-q { width: 48px; height: 48px; } .ahf-n { height: 48px; width: 72px; font-size: 16px; } .ahf-btn { min-height: 48px; } } /* ── barra fija de accion (#ahfBarra) ────────────────────────────────────── */ /* `position: fixed` y nada de alto reservado: no mueve una sola caja de la pagina (CLS intacto). Oculta con `visibility`, no con `display`, para que salga del orden de tabulacion y aun se pueda animar. */ .ahfb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: #fff; border-top: 1px solid var(--nav-linea); box-shadow: 0 -6px 24px rgba(10, 30, 94, .12); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); visibility: hidden; opacity: 0; transform: translateY(100%); transition: transform .18s ease, opacity .18s ease, visibility .18s; } .ahfb.on { visibility: visible; opacity: 1; transform: none; } .ahfb-in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 12px; } .ahfb-tx { display: grid; min-width: 0; flex: 1 1 auto; } .ahfb-cod { font-size: 13.5px; font-weight: 700; color: var(--nav-marino); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ahfb-precio { font-size: 13px; color: var(--nav-tinta-2); font-variant-numeric: tabular-nums; } .ahfb-qty { display: flex; align-items: center; flex: none; } .ahfb-q { width: 44px; height: 44px; border: 1px solid var(--nav-linea); background: #fff; color: var(--nav-marino); font: inherit; font-size: 19px; line-height: 1; cursor: pointer; border-radius: 8px 0 0 8px; } .ahfb-q + .ahfb-n + .ahfb-q { border-radius: 0 8px 8px 0; } .ahfb-n { width: 56px; height: 44px; text-align: center; border: 1px solid var(--nav-linea); border-left: 0; border-right: 0; font: inherit; font-size: 15px; font-weight: 700; color: var(--nav-tinta); background: #fff; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .ahfb-n::-webkit-outer-spin-button, .ahfb-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .ahfb-btn { flex: none; min-height: 44px; padding: 0 20px; border-radius: 8px; cursor: pointer; border: 1.5px solid var(--nav-liga-alta); background: var(--nav-liga-alta); color: #fff; font: inherit; font-size: 14px; font-weight: 700; } .ahfb-btn:hover { background: var(--nav-liga); border-color: var(--nav-liga); } .ahfb-q:focus-visible, .ahfb-n:focus-visible, .ahfb-btn:focus-visible { outline: 2px solid var(--nav-liga-alta); outline-offset: 2px; } /* En movil no cabe todo en un renglon: a 390 px el codigo se quedaba con 14 px y salia partido en dos letras (medido). Dos renglones — identidad arriba, accion abajo — y el boton ocupa lo que sobra, que es donde va el pulgar. */ @media (max-width: 559px) { .ahfb { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); } .ahfb-in { flex-wrap: wrap; gap: 8px 10px; } .ahfb-tx { flex: 1 1 100%; display: flex; align-items: baseline; gap: 10px; } .ahfb-precio { margin-left: auto; white-space: nowrap; } .ahfb-btn { flex: 1 1 auto; padding: 0 14px; font-size: 13.5px; } .ahfb-n { width: 48px; } } @media (prefers-reduced-motion: reduce) { .ahfb { transition: none; } } /* El boton del chat y la tarjeta de cookies viven en la misma esquina y se suben cuando la barra esta puesta. La especificidad tiene que GANARLE a la suya: `#ahnsa-chat-btn` (0,1,0,0) se inyecta desde js/ahnsa-chat.js DESPUES de esta hoja, asi que empatar no basta — de ahi el `body.ahf-barra-on`. */ /* v12 (4-sep): se suben con TRANSFORM y no cambiando `bottom`. Un elemento fijo que cambia de `bottom` cuenta como layout shift: la tarjeta de cookies saltaba 99 px al aparecer la barra y sumaba 0.0345 de CLS en movil (medido 390x844, CNMG431EEG-AC8020P). transform es de compositor y no cuenta. */ body.ahf-barra-on #ahnsa-chat-btn { transform: translateY(calc(-1 * var(--ahf-barra-h, 64px))); } body.ahf-barra-on #ahnsa-chat-panel { transform: translateY(calc(-1 * var(--ahf-barra-h, 64px))); } body.ahf-barra-on .hm-ck { transform: translateY(calc(-1 * var(--ahf-barra-h, 64px))); } @media print { .ahfb { display: none !important; } } /* ===== CROQUIS v2 (5-sep-2026, handdown; Mario 08:55 «looks really good») ===== PIEL del dibujo tecnico. Fuente unica: _entrega_handdown/dibujo/ahnsa-croquis-v2.css. El SVG lo emite el ESPEJO croquis_cad.py <-> ahnsa-croquis.js (verifica_croquis): aqui NO se toca ni una coordenada. Esta hoja solo pisa las clases semanticas que el motor ya declara en su