/* Armado en México — Copyright (C) 2026 Saulo Flores León SPDX-License-Identifier: AGPL-3.0-or-later Software libre bajo AGPL-3.0. Sujeto además a los términos adicionales (§7 c, e) de TERMINOS-ADICIONALES.md, en la raíz del repositorio. */ /* ══════════════════════════════════════════════════════════════════════════ Armado en México — sistema visual «Documento Oficial Mexicano» Brief: DESIGN.md · Paleta auditada con .claude/skills/fidelidad-diseno/scripts/contraste.mjs TODO va scoped bajo .amx-v2 a propósito: mientras se compara contra el estilo actual, el resto de la app no debe cambiar ni un píxel. Si este estilo gana, se quita el scope y se borran los inline que sustituye. REGLA: una propiedad vive aquí O vive inline, nunca en las dos. El inline gana por especificidad y empieza la guerra de !important. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ LOS TOKENS — la ÚNICA fuente de los colores del sitio (los dos temas) Viven en `:root`, no en `.amx-v2`, porque `PALETTE`/`CLARO` de ui.jsx ya no guardan hex: guardan `var(--token)`. React pasa la `var()` tal cual al atributo `style`, así que los ~1355 usos inline heredan el tema sin tocarlos — pero solo si el token está declarado en un ancestro de CUALQUIER nodo de la app, incluidos los portales y `admin.html`. `:root` es ese ancestro. LOS DOS TEMAS SE DECLARAN AQUÍ, en el mismo bloque: --x = el valor del tema CLARO --d-x = el valor del tema OSCURO y más abajo dos reglas cortas hacen `--x: var(--d-x)`. Así ningún valor se escribe dos veces (una lista duplicada se desincroniza al primer retoque) y `contraste.mjs` puede auditar LOS DOS TEMAS leyendo un solo bloque. Si añades un token, añade su `--d-` y su línea en las DOS reglas de abajo. ══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ── SUPERFICIES ──────────────────────────────────────────────────────── CLARO: entre dos claros el contraste máximo es ~1.2:1 (papel/lienzo = 1.14:1). Quien separa las capas es --sombra. OSCURO: la sombra NO separa —no hay luz que ocultar—, así que la jerarquía la hace el SALTO DE SUPERFICIE (papel/lienzo = 1.48:1, un tercio más que en claro) más un hairline visible (--hair sobre --papel = 1.68:1). Es el problema inverso al del tema claro y lleva su propia respuesta. */ --lienzo: #E7EAE4; --d-lienzo: #1D1D1D; /* lienzo de la app. El oscuro lo eligio Saulo el 8-sep-2026: con #0E1211 el papel del folder saltaba demasiado. */ --papel: #F7F8F4; --d-papel: #333C38; /* la tarjeta — 1.14:1 claro / 1.48:1 oscuro */ /* La fila alterna va HUNDIDA respecto al papel en los dos temas —más oscura, no más clara—: es lo mismo que hace el tema claro y deja la tinta de estado con más aire (--alerta pasa de 4.40:1 a 5.97:1 sobre ella). */ --beige: #E4E7E0; --d-beige: #262E2A; /* 1.17:1 claro / 1.22:1 oscuro, SOLO con hairline */ --hoja-filtro: #FBFAF5; --d-hoja-filtro: #2E3632; /* la hoja del filtro abierto (§5.10): el oficio; en oscuro, un punto bajo el papel */ /* La PLACA FOTOGRÁFICA no se invierte: 87 de las 111 fotos son recortes sobre BLANCO OPACO (CLAUDE.md), y sobre una placa oscura se leen como un rectángulo blanco pegado — «se leen como un error», ya medido en la época en que el sitio era oscuro. Una copia revelada sigue siendo papel: la placa se queda clara en los dos temas, apenas atenuada en oscuro. */ --papel-hi: #FFFFFF; --d-papel-hi: #E8EBE5; --hair: #B6BDB0; --d-hair: #525E58; /* 1.59:1 claro / 1.68:1 sobre el papel oscuro */ --hair-hi: #868E84; --d-hair-hi: #7C8A83; /* borde que PORTA estado — 3.17:1 / 3.16:1 (WCAG 1.4.11) */ --hair-osc: rgba(250, 249, 245, .10); /* hairline sobre superficie de marca — igual en ambos */ /* ── TINTA ──────────────────────────────────────────────────────────────── */ --negro: #171B19; --gris: #59605C; --tinta: var(--negro); --d-tinta: #EAEEE8; /* 14.32:1 / 9.70:1 sobre el papel */ --tinta-dim: #3E443D; --d-tinta-dim: #C6CDC7; /* 8.24:1 / 7.03:1 */ --tinta-2: var(--gris); --d-tinta-2: #A5AFA8; /* 5.32:1 / 5.04:1 */ /* Tinta SOBRE LA PLACA fotográfica, que no cambia de tema: tampoco cambia. */ --tinta-placa: #59605C; /* 6.46:1 / 5.36:1 */ --silueta: #868E84; --d-silueta: #798177; /* gráfico sobre la placa — 3.38:1 / 3.34:1 */ /* ── LA COPIA INSTANTÁNEA — tokens DIEGÉTICOS, sin tema ────────────────── La polaroid no es una superficie de la interfaz: es un OBJETO dentro de la ficción del sitio, una copia revelada dejada sobre el folder. Un objeto no cambia de color porque el usuario cambie el tema — una polaroid real es blanca en una habitación a oscuras igual que a plena luz. Lo que cambia es la luz que la rodea, y de eso ya se ocupa `--sombra`. Por eso NINGUNO de estos tokens tiene gemelo `--d-`: son los mismos en los dos temas, a propósito. Si añades uno aquí, NO le pongas variante oscura. Sus ratios, por tanto, se miden una sola vez y valen para ambos. */ --copia-carton: #F7F8F4; /* el cartón de la copia */ --copia-placa: #FFFFFF; /* el área de imagen, un punto más clara */ --copia-filo: #B6BDB0; /* el canto del cartón — 1.59:1 sobre él */ --copia-tinta: #171B19; /* lo escrito en el faldón — 16.31:1 */ --copia-tinta-2: #59605C; /* la leyenda del expediente — 6.46:1 */ --copia-silueta: #868E84; /* la silueta — 3.38:1 (WCAG 1.4.11 pide 3:1) */ /* ── EL FOLDER MANILA — también diegético, tampoco lleva `--d-` ─────────── Los valores salen medidos de la fotografía de un folder real (el asset de referencia de Saulo): cuerpo, canto y el filo de las hojas que asoman. El folder NO entra como imagen: estirar la foto deforma la pestaña y el filo, así que la geometría es CSS y escala a cualquier tamaño. */ /* NO hay token para el cuerpo del cartón, y es deliberado: el color lo pone la fotografía. Hubo un `--carton: #F3E5C5` usado de respaldo debajo del .webp, y ese color rellenaba el rectángulo entero del elemento —incluida la franja de arriba, transparente en un 69 % porque ahí solo sobresale la pestaña—, así que borraba la silueta del folder. Si vuelve a hacer falta un respaldo, que sea con `image-set()` o un fallback que respete la alfa, nunca un color de fondo. */ --carton-alto: #F6EACF; /* la pestaña, que recibe algo más de luz */ --carton-filo: #D8C69B; /* el canto y las hojas — 1.35:1, y está bien: es el filo de un objeto, no porta información. Mismo papel que --copia-filo (1.59:1). Quien separa el folder del lienzo es la sombra. */ --carton-tinta: #171B19; /* lo mecanografiado — 13.94:1 sobre el cartón */ --carton-tinta-2: #5A5142; /* lo secundario — 6.25:1 */ /* ── LA FICHA DE FICHERO — diegética, tampoco lleva `--d-` ─────────────── El papel sale medido del propio .webp. Los ratios son contra el punto MÁS OSCURO de la ficha (#CED2C3, la línea azul del rayado), no contra el papel medio: el texto puede caer encima de una línea y ahí es donde peor lo tiene. Por eso en esta ficha no entra ni el rojo de acción (4.44:1 sobre el rayado) ni el verde de marca (4.84:1 sobre el papel). */ --ficha: #E7DCC6; /* la cartulina, por si el .webp no llega */ --ficha-tinta: #171B19; /* 11.29:1 sobre el rayado */ --ficha-tinta-2: #5A5142; /* 5.07:1 sobre el rayado */ /* ── LOS SELLOS DE TINTA ───────────────────────────────────────────────── Dos colores, no tres: el amarillo que pedía el boceto para SEGURIDAD no llega a 3:1 sobre ningún papel de los que hay aquí. Saulo lo cambió a rojo el 8-sep-2026, así que el rojo cubre las dos categorías restringidas y el color deja de ser lo que las distingue — las distingue la palabra. */ --sello-civil: #2F6B33; /* CIVIL — 6.02:1 sobre el faldón de la copia */ --sello-restr: #A3341F; /* SEGURIDAD y EXCLUSIVO — 6.42:1 */ /* ── LA CARTA DE LOTERÍA — diegética, tampoco lleva `--d-` ─────────────── Saulo cambió las categorías por cartas de lotería el 8-sep-2026. Es un objeto impreso, como la copia y el folder: una carta de lotería es blanca y amarilla en una mesa a oscuras igual que a plena luz, así que ninguno de estos tokens tiene gemelo oscuro y sus ratios se miden una sola vez. NO se reproduce ninguna carta existente: se reproduce el FORMATO —cartón blanco, lámina amarilla, número arriba, nombre abajo—, que es de dominio popular. Las ilustraciones de la baraja de Clemente Jacques tienen dueño. */ --loteria-carton: #FBF8EF; /* el margen de papel, igual que la copia */ --loteria-lamina: #EFC01F; /* el amarillo de la lámina */ --loteria-tinta: #171B19; /* 10.13:1 sobre la lámina · 16.38:1 sobre el cartón */ --loteria-tinta-2:#5A5142; /* 4.55:1 sobre la lámina — el número y lo secundario */ --loteria-filo: #B6BDB0; /* el canto del cartón — mismo papel que --copia-filo */ /* ── EL PUESTO DE MUNICIÓN — diegético, tampoco lleva `--d-` ───────────── «Las cajas de municiones con transparencia sobre una mesa y al pasar el mouse por encima se iluminan ligeramente por detrás. Y sus letreros serán como los típicos letreros mexicanos de los tianguis y mercados de frutería» (tablero del 8-sep-2026). La mesa sigue siendo BOCETO: va dibujada en SVG dentro de `--mesa-madera` mientras llega la foto, detrás de una sola variable a propósito — sustituirla es cambiar esa línea por un `url(imagenes/…​.webp)`, sin tocar ningún componente. El LETRERO ya hizo ese viaje (9-sep-2026): era un rectángulo de color y hoy es la foto real recortada con alfa. */ --mesa-tabla: #C09A72; /* la tabla — tinta oscura encima daría 6.71:1 */ --mesa-veta: #A8875F; --mesa-junta: #94714E; --mesa-canto: #7E6042; /* el canto que mira al comprador */ --letrero: url(imagenes/letrero-mercado.webp); /* el cartel de mercado, con alfa */ /* Medido a mano sobre la banda del rótulo del WebP (contraste.mjs solo audita la PALETTE, no los tokens diegéticos): la cara del cartel es #D9DD00 y su píxel más oscuro bajo el texto #D9DB00 → la tinta da 11.84:1 y 11.67:1. Antes, sobre el amarillo dibujado #F2CE1B, daba 11.28:1. */ --letrero-tinta: #171B19; --palo: #B4906A; /* la vara del cartel */ --puesto-luz: #FFE9A8; /* la luz que se enciende detrás de la caja */ /* ── LA VITRINA DE ACCESORIOS — diegética (15-sep-2026) ────────────────── La lona del toldo, en el verde de marca y crema (Saulo). Es un objeto: no tiene gemelo oscuro. El rótulo va en crema sobre la banda verde. */ --lona-verde: #173A32; --lona-crema: #F3EFE4; /* 10.83:1 sobre la lona verde */ /* ── LA PAPELERÍA DE LA FICHA DE ARMA — diegética (13-sep-2026) ────────── El expediente completo: el folder manila de la Home abierto a toda la ficha, y dentro los papeles de oficina de cada dato. Todos son OBJETOS, así que no llevan `--d-`… salvo el manila, que es la excepción pedida por Saulo: «manila en penumbra» en el tema oscuro. El folder ocupa casi toda la pantalla y a oscuras deslumbraba; baja la luz sobre ÉL, no su color (lo pone la foto), y los papeles de dentro siguen claros. `--manila-medido` NO se pinta en ningún sitio: es el 1 % más oscuro del papel de `folder-manila.webp`, medido, y en penumbra ese mismo punto al 68 % de brillo. Existe para que `contraste.mjs` audite la tinta sobre el folder en los dos temas sin medir a mano. */ --manila-medido: #EEDFBD; --d-manila-medido: #A29780; --manila-luz: 1; --d-manila-luz: .68; --manila-tinta: #171B19; /* 13.19:1 claro · 6.03:1 en penumbra */ --manila-tinta-2: #5A5142; --d-manila-tinta-2: #171B19; /* 5.92:1; en penumbra daría 2.9:1, así que pasa a la tinta plena y lo secundario se distingue por cuerpo, no por tono */ /* El talón: papel autocopiante ROSA, la «copia del cliente». */ --talon: #F7D9DC; --talon-filo: #E2B4BB; /* perforación y rayas — gráfico, no porta información */ --talon-tinta: #171B19; /* 13.18:1 */ --talon-tinta-2: #6A4C52; /* 5.75:1 */ --talon-rojo: #A3341F; /* 5.19:1 — el encabezado impreso */ /* La ficha de fichero, calcada en CSS de `ficha-biblioteca.webp` (papel #E8DCC4, rayado azul #A6B7BA, renglón rojo): la ficha técnica crece con el arma y el .webp estirado deformaba el rayado. El azul va un punto más claro que el de la foto: la tinta secundaria puede caer sobre la raya y ahí el #B3C3C6 daba 4.29:1; con #C3CFD1 da 4.89:1. */ --fichero: #EAE0CA; --fichero-rojo: #D98C84; --fichero-azul: #C3CFD1; /* La tarjeta de almacén (kárdex): cartulina verde pálido con rayado impreso. */ --kardex: #E2EBD8; --kardex-linea: #8FAE8C; --kardex-imp: #2F5B3A; /* 6.39:1 — lo impreso de la tarjeta */ --kardex-tinta-2: #4F5A4B; /* 5.91:1 */ /* El papel milimétrico del historial, con su cuadrícula azul. */ --milimetrico: #F6F9F5; --milimetrico-linea: #8FB2C4; --milimetrico-tinta-2: #4E5B63; /* 6.59:1 */ /* La hoja de oficio (Legalidad · Usos · Antecedentes) y los anexos. */ --oficio: #FBFAF5; --nota-azul: #0645AD; /* la nota [n] de Legalidad: azul de enlace, fijo porque va sobre papel (8.2:1 / 6.5:1) */ --oficio-2: #E7E1D1; /* el separador de atrás, un papel más gastado */ --oficio-tinta-2: #5A5142; /* 7.47:1 sobre el oficio · 5.98:1 sobre el separador */ --sello-azul: #3F4A7A; /* tinta de sello de goma para lo que NO es legal: los usos y la foto pendiente — 8.13:1 sobre el oficio · 8.50:1 sobre la placa de la copia */ /* La etiqueta de precio de la vitrina, en cartón claro. */ --etiqueta: #F3E7C6; --etiqueta-tinta-2: #5A5142; /* 6.34:1 */ --laton: #CDB57A; /* la placa de la repisa — la tinta da 8.69:1 */ --vitrina-fondo: #EFEADF; /* La cinta rotuladora: negra, con las letras en relieve. */ --dymo: #1C1D1F; --dymo-letra: #F2F1EC; /* 14.92:1 */ --dymo-canto: rgba(242, 241, 236, 0); --d-dymo-canto: rgba(242, 241, 236, .16); /* en oscuro la cinta de los chips se despega del lienzo */ /* El rotulador rojo del comparador: circula el valor que gana (14-sep-2026). Es trazo, no texto: el mínimo es 3:1 (WCAG 1.4.11) sobre el fichero. */ --rotulador: #C63A32; /* El televisor de los 80. */ --tele-mueble: #5E3F26; --tele-marco: #26221E; --tele-perilla: #BDB6A6; /* ── MARCA ────────────────────────────────────────────────────────────── El verde #173A32 es el color de marca y NO se toca: en oscuro sigue siendo una SUPERFICIE oscura (banda, nav, hero), que es lo que siempre fue, y se distingue del lienzo por hue y por 1.52:1. Lo que sí cambia es su papel de ACENTO: como tinta o borde sobre un fondo oscuro, #173A32 desaparece. Por eso el acento se separa de la superficie en dos tokens y en oscuro toma una variante clara del mismo verde. */ --marca: #173A32; /* superficie de marca — idéntica en los dos temas */ --marca-alt: #1E4A40; --crema: #F3EFE4; /* tinta sobre la marca — 10.83:1 en los dos */ --blanco: #FAF9F5; /* tinta sobre el rojo de relleno — 4.83:1 */ --sobre-marca: var(--crema); --sobre-marca-dim: #B8C2BA; /* enlace inactivo sobre la marca — 6.79:1 */ --sobre-marca-muted: #9FACA2; /* lo desactivado — 5.27:1 */ --acento: #173A32; --d-acento: #79C3AB; /* 10.24:1 / 9.17:1 sobre el lienzo */ /* La tinta que va ENCIMA de un relleno de --acento. En claro el acento es verde oscuro y la tinta va clara; en oscuro el acento es verde claro y la tinta va oscura. Este token es lo que sustituye al cálculo de luminancia de `amxTintaSobre` para el único relleno que la app conoce de antemano. */ --tinta-sobre-marca: var(--crema); --d-tinta-sobre-marca: #0E1211; /* 10.83:1 / 9.17:1 */ --verde-2: #2C6457; --d-verde-2: #3E8A78; /* superficie/tira decorativa (tricolor) */ /* ── ESTADO ────────────────────────────────────────────────────────────── Los tres colores de disponibilidad legal viven en los data-*.js calibrados para superficie CLARA. Aquí están sus gemelos por superficie, siguiendo el precedente de CLARO.ok / CLARO.alerta. `amxColorAvail()` (ui.jsx) traduce el hex del dato a estos tokens. */ --ok: #2F6B33; --d-ok: #63C07C; /* 5.28:1 / 5.47:1 */ /* SEGURIDAD comparte el rojo de EXCLUSIVO desde el 8-sep-2026. El amarillo que tenía (#7D6108) no llegaba a 3:1 sobre los papeles del expediente, y Saulo decidió dos colores y no tres: verde para lo civil, rojo para las dos categorías restringidas. El color deja de distinguirlas y pasa a hacerlo la PALABRA — por eso ninguna etiqueta de legalidad se abrevia. Se conserva el token con su nombre: los data-*.js siguen mandando el hex viejo y `amxColorAvail()` lo traduce aquí, así que el cambio llega a todo el sitio sin tocar los datos ni el cache-busting. */ --seguridad: var(--alerta); --d-seguridad: var(--d-alerta); --alerta: #A3341F; --d-alerta: #F0907E; /* 5.63:1 / 5.26:1 */ --azul: #4A6B7C; --d-azul: #8FB9CE; /* 4.69:1 / 5.85:1 */ --gris-2: #7C837B; --d-gris-2: #99A39B; /* gráfico apagado */ --rojo: #C83B32; /* relleno de CTA con --blanco encima — igual en ambos */ --rojo-txt: #C63A32; --d-rojo-txt: #F08D7C; /* rojo como texto/anillo — 4.27:1 / 8.08:1 */ --rojo-sobre-marca: #F29C8C; /* rojo sobre la marca — 5.87:1 en los dos */ /* ── SOMBRA Y TINTES ───────────────────────────────────────────────────── Tres capas en la TINTA del sitio (23,27,25), no en el verde de marca: un halo cromático es un tic reconocible de UI generada y el detector lo marca como `dark-glow`. Máximo 18px de blur (§6 veta blur > 24px en listas). En OSCURO la sombra no separa capas —eso lo hace el salto de superficie— pero sigue dando el contacto del borde: se queda, en negro y más opaca. */ --sombra: 0 1px 2px rgba(23,27,25,.14), 0 4px 8px -2px rgba(23,27,25,.16), 0 12px 18px -8px rgba(23,27,25,.28); --d-sombra: 0 1px 2px rgba(0,0,0,.46), 0 4px 8px -2px rgba(0,0,0,.40), 0 12px 18px -8px rgba(0,0,0,.56); --sombra-hover: 0 2px 4px rgba(23,27,25,.18), 0 8px 14px -2px rgba(23,27,25,.20), 0 20px 24px -10px rgba(23,27,25,.34); --d-sombra-hover: 0 2px 4px rgba(0,0,0,.52), 0 8px 14px -2px rgba(0,0,0,.46), 0 20px 24px -10px rgba(0,0,0,.62); --papel-grad: linear-gradient(180deg, #FDFEFC, #F1F4EE); --d-papel-grad: linear-gradient(180deg, #343E39, #29312D); --hover-suave: rgba(23,58,50,.06); --d-hover-suave: rgba(233,237,231,.07); --rejilla: rgba(23,58,50,.035); --d-rejilla: rgba(121,195,171,.055); --seleccion: rgba(23,58,50,.16); --d-seleccion: rgba(121,195,171,.26); --placeholder: #626963; --d-placeholder: #9DA7A0; /* 4.65:1 / 4.59:1 */ --barra-track: #DCE0D8; --d-barra-track: #1A211E; --barra-thumb: #B6BDB0; --d-barra-thumb: #4A554F; --barra-thumb-hi:#59605C; --d-barra-thumb-hi:#8B968F; /* ── Espaciado: 6 valores (DESIGN.md §5.2). Antes había 36 sueltos ── */ --e1: 4px; --e2: 8px; --e3: 12px; --e4: 20px; --e5: 32px; --e6: 52px; --radio: 10px; /* §27: border radius consistente, bordes finos */ --radio-sm: 6px; --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; } /* ── El tema OSCURO ───────────────────────────────────────────────────────── Dos reglas con la MISMA lista de asignaciones y ningún valor propio: 1) sin elección explícita manda `prefers-color-scheme` (el `:not` deja pasar la elección «claro», que si no perdería contra la preferencia del SO); 2) la elección explícita del usuario, que gana por especificidad y por orden. `color-scheme: dark` es lo que pone en oscuro los controles NATIVOS —barras de scroll, inputs, selects— que ningún token alcanza. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; --manila-medido: var(--d-manila-medido); --manila-luz: var(--d-manila-luz); --manila-tinta-2: var(--d-manila-tinta-2); --lienzo: var(--d-lienzo); --papel: var(--d-papel); --beige: var(--d-beige); --papel-hi: var(--d-papel-hi); --hair: var(--d-hair); --hair-hi: var(--d-hair-hi); --hoja-filtro: var(--d-hoja-filtro); --dymo-canto: var(--d-dymo-canto); --tinta: var(--d-tinta); --tinta-dim: var(--d-tinta-dim); --tinta-2: var(--d-tinta-2); --silueta: var(--d-silueta); --acento: var(--d-acento); --tinta-sobre-marca: var(--d-tinta-sobre-marca); --verde-2: var(--d-verde-2); --ok: var(--d-ok); --seguridad: var(--d-seguridad); --alerta: var(--d-alerta); --azul: var(--d-azul); --gris-2: var(--d-gris-2); --rojo-txt: var(--d-rojo-txt); --sombra: var(--d-sombra); --sombra-hover: var(--d-sombra-hover); --papel-grad: var(--d-papel-grad); --hover-suave: var(--d-hover-suave); --rejilla: var(--d-rejilla); --seleccion: var(--d-seleccion); --placeholder: var(--d-placeholder); --barra-track: var(--d-barra-track); --barra-thumb: var(--d-barra-thumb); --barra-thumb-hi: var(--d-barra-thumb-hi); } } :root[data-tema="oscuro"] { color-scheme: dark; --manila-medido: var(--d-manila-medido); --manila-luz: var(--d-manila-luz); --manila-tinta-2: var(--d-manila-tinta-2); --lienzo: var(--d-lienzo); --papel: var(--d-papel); --beige: var(--d-beige); --papel-hi: var(--d-papel-hi); --hair: var(--d-hair); --hair-hi: var(--d-hair-hi); --hoja-filtro: var(--d-hoja-filtro); --dymo-canto: var(--d-dymo-canto); --tinta: var(--d-tinta); --tinta-dim: var(--d-tinta-dim); --tinta-2: var(--d-tinta-2); --silueta: var(--d-silueta); --acento: var(--d-acento); --tinta-sobre-marca: var(--d-tinta-sobre-marca); --verde-2: var(--d-verde-2); --ok: var(--d-ok); --seguridad: var(--d-seguridad); --alerta: var(--d-alerta); --azul: var(--d-azul); --gris-2: var(--d-gris-2); --rojo-txt: var(--d-rojo-txt); --sombra: var(--d-sombra); --sombra-hover: var(--d-sombra-hover); --papel-grad: var(--d-papel-grad); --hover-suave: var(--d-hover-suave); --rejilla: var(--d-rejilla); --seleccion: var(--d-seleccion); --placeholder: var(--d-placeholder); --barra-track: var(--d-barra-track); --barra-thumb: var(--d-barra-thumb); --barra-thumb-hi: var(--d-barra-thumb-hi); } .amx-v2 { /* La app es CLARA por defecto: el lienzo es papel de oficio frío y el verde es color de MARCA (banda, sello, acentos). En oscuro el lienzo baja a #0E1211 y el verde de marca se queda donde está. */ background: var(--lienzo); color: var(--tinta); font-family: var(--sans); } /* ── Tipografía ─────────────────────────────────────────────────────────── */ .amx-v2 .t-titulo { font-family: var(--sans); font-weight: 700; font-stretch: 85%; /* Archivo es variable: condensa sin otra familia */ text-transform: uppercase; letter-spacing: .045em; line-height: 1.1; text-wrap: balance; } /* Retirada .t-dato el 12-sep-2026: cero usos en jsx/html/js. Las cifras tabulares las pone cada componente con var(--mono) y tabular-nums. */ /* ── Superficies ────────────────────────────────────────────────────────── */ /* Retiradas .p-blanco, .p-oscuro y .t-etiqueta: cero usos en jsx/html. Y con ellas .p-claro, que envolvía la tabla de la pestaña «Especificaciones»: esa pestaña la absorbió la ficha técnica del folder (§4.3), y la utilidad se quedó sin un solo consumidor. */ /* Aquí vivía `.sello`, el folio `AR-####` de la ficha. El folio se retiró del JSX el 7-sep-2026 —un código de expediente que no corresponde a ningún registro real es decoración que finge ser dato—, pero la regla se quedó huérfana hasta el 10-sep. Se va con él, y de paso sus 10px, por debajo del piso de 11px para texto funcional. */ /* Aquí vivía `.tricolor`, la línea verde-blanco-rojo bajo el título de la ficha. Retirada el 8-sep-2026 por decisión de Saulo: es la bandera de México y aparecía bajo el nombre de armas checas, italianas o brasileñas, así que sugería una nacionalidad que el arma no tiene. Quien dice el origen ahora es la bandera del país real, en el faldón de la polaroid. §6b la lista entre lo permitido —y lo sigue estando como recurso gráfico—, pero permitido no es obligatorio: aquí desinformaba. Se fue sin dejar un solo consumidor. */ /* Retirados .btn, .btn-rojo y .btn-claro el 12-sep-2026: cero usos en jsx/html/js desde 272b1b9. Los botones viven en las primitivas de ui.jsx. */ /* ── Foco: no negociable, y clip-path se lo come si no se compensa ──────── */ .amx-v2 :focus-visible { outline: 2px solid var(--rojo-txt); outline-offset: 2px; border-radius: var(--radio-sm); } /* El anillo por defecto (--rojo-txt, 4.27:1 sobre el lienzo) sirve en todo el lienzo claro. El beige aquí era del tema oscuro: sobre el lienzo da 1.17:1. La única superficie oscura que queda es la banda de marca, más abajo. */ @media (prefers-reduced-motion: reduce) { .amx-v2 * { transition: none !important; animation: none !important; } } /* ── Tarjeta clara: el patrón dominante del mockup ───────────────────────── */ /* La sombra base vive AQUI, no inline: un `boxShadow` en el objeto style gana siempre por especificidad y dejaba muerta la regla :hover de abajo (el hover solo levantaba, la sombra no se movia). Las tres tarjetas que llevan esta clase (ArmaCard, AccesorioCard, MunicionCard) ya no la declaran inline. */ .amx-v2 .amx-card { box-shadow: var(--sombra); transition: box-shadow .18s, transform .18s; } /* El hover sube un escalón la MISMA sombra de tres capas — no cambia de recurso. Tope de 24px de blur (§6); aquí solo se repinta una tarjeta. */ .amx-v2 .amx-card:hover { box-shadow: var(--sombra-hover); transform: translateY(-2px); } .amx-v2 .amx-card:has(:focus-visible) { outline: 2px solid var(--rojo-txt); outline-offset: 2px; } /* CUT_TR quedó en 'none': el redondeo lo pone aquí, así los 11 usos del bisel pasan a esquina suave sin editarlos. Y el foco deja de recortarse. */ .amx-v2 .amx-cut, .amx-v2 [style*="clip-path"] { border-radius: 8px; } @media (prefers-reduced-motion: reduce) { .amx-v2 .amx-card:hover { transform: none; } } /* ── Banda de marca: el verde a todo el ancho, cerrado en curva ──────────── */ .amx-v2 .amx-banda-marca { background: var(--marca); color: var(--sobre-marca); /* padding-bottom mayor que el resto: el buscador tiene que respirar antes de que empiece la curva, si no el pill parece pegado al borde. */ padding: var(--e4) var(--e4) var(--e5); border-bottom-left-radius: 22px; border-bottom-right-radius: 22px; } /* Sobre el verde el anillo rojo del foco da 2.45:1: aquí va en crema. */ .amx-v2 .amx-banda-marca :focus-visible { outline-color: var(--sobre-marca); } /* ── Buscador de cristal sobre la banda verde ────────────────────────────── */ /* Cristal SIMULADO: dos capas de blanco translúcido + un inset highlight. NADA de backdrop-filter — DESIGN.md §6 lo veta en cualquier cosa que haga scroll, y en móvil es el efecto que más caro sale de repintar. */ .amx-v2 .amx-buscador { display: flex; align-items: center; gap: var(--e2); min-height: 48px; /* área táctil, con holgura sobre los 44 */ padding: 0 var(--e4); border-radius: 999px; background: linear-gradient(180deg, rgba(250,249,245,.16), rgba(250,249,245,.06)); border: 1px solid rgba(250,249,245,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 10px -4px rgba(0,0,0,.28); color: var(--crema); } /* Texto en crema: 10.83:1 sobre el verde plano y 6.69:1 en el punto más claro del cristal (#3B5951, donde el overlay .16 pesa más). */ .amx-v2 .amx-buscador input, .amx-v2 input.amx-buscador { flex: 1 1 auto; min-width: 0; background: none; border: 0; color: var(--crema); font-family: var(--sans); font-size: 15px; outline-offset: 4px; /* el anillo de foco no muerde el pill */ } /* Placeholder a .76, no a .62: compuesto sobre el punto más claro del cristal, .62 cae a 3.68:1 y no pasa. A .76 da 4.66:1 ahí y 6.98:1 sobre el verde plano, y sigue leyéndose más apagado que lo que el usuario escribe. */ .amx-v2 .amx-buscador input::placeholder, .amx-v2 input.amx-buscador::placeholder { color: rgba(243, 239, 228, .76); opacity: 1; /* Firefox le baja la opacidad por su cuenta */ } /* Retirados .amx-accion y .amx-accion-verde (enlace de acción en rojo como texto) el 12-sep-2026: cero usos en jsx/html/js. Si vuelve un enlace así, sus tintas medidas eran --alerta sobre el lienzo y --rojo-sobre-marca sobre la marca, con el foco en el mismo color del texto sobre verde. */ /* ── Foco sobre las superficies verdes de marca ───────────────────────────── */ /* El anillo global usa --rojo-txt, que sobre el verde de marca mide 2.40:1 y no llega al 3:1 que pide WCAG 2.4.11 para el indicador de foco. En header, nav y desplegable el anillo va en crema (10.83:1). */ .amx-v2 .amx-sobre-verde :focus-visible { outline: 2px solid var(--sobre-marca); outline-offset: 2px; } /* ── Botón de tema: solo icono (TemaToggle, ui.jsx) ────────────────────────── Va siempre sobre la marca, que es verde oscuro en los dos temas, así que las tintas son fijas: reposo --sobre-marca-dim (6.79:1, la de los enlaces inactivos) y al pasar el verde claro --d-acento (6.05:1). */ .amx-v2 .amx-tema { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; /* área táctil (§7) */ padding: 0; background: none; border: 0; border-radius: 999px; cursor: pointer; color: var(--sobre-marca-dim); transition: color .15s; } .amx-v2 .amx-tema:hover { color: var(--d-acento); } .amx-v2 .amx-tema svg { display: block; } /* ══════════════════════════════════════════════════════════════════════════ LA COPIA INSTANTÁNEA — la usan la Home, las tarjetas expediente y la ficha Aquí vivían también el folder CSS de la ficha (`.amx-folder*`), su precio (`.amx-precio-ref*`), su ficha técnica en tabla (`.amx-ficha`, `.specs`) y sus pestañas (`.tabs-bar`). El rediseño del 13-sep-2026 los sustituyó por el expediente completo, que vive al final del archivo: LA FICHA DE ARMA. ══════════════════════════════════════════════════════════════════════════ */ /* ── La polaroid ───────────────────────────────────────────────────────── Es GEOMETRÍA, no un filtro: §4 pide el estilo ochentero «en el lenguaje visual, no mediante filtros de imagen envejecidos». Cero sepia, cero grano, cero viñeta, cero `filter`. Lo que la hace polaroid es el FALDÓN inferior ancho, con el nombre del arma escrito en él. NO SIGUE AL TEMA, y es deliberado: es un objeto diegético —una copia dejada sobre el folder—, no una superficie de la interfaz. Va con los tokens `--copia-*`, que no tienen variante oscura. Sobre el lienzo oscuro se lee como lo que es: un papel blanco encima de un escritorio a media luz. */ .amx-v2 .amx-polaroid { margin: 0; background: var(--copia-carton); border: 1px solid var(--copia-filo); border-radius: 2px; /* una copia revelada no tiene esquinas redondeadas */ padding: 14px; box-shadow: var(--sombra); } /* Las fotos de las traumáticas no tienen faldón de texto — solo el pozo con la imagen — así que el padding de 14px se ve excesivo y estira la copia. Reducimos a 6px para que la foto ocupe más y se vea como una foto real, no como una tarjeta extendida. */ .amx-v2 .amx-cotiz-partida .amx-polaroid { padding: 6px; align-self: start; /* no estirar la polaroid en el grid */ } @media (min-width: 1024px) { /* Giro ESTÁTICO y mínimo, con `transform` (§6 prohíbe animar otra cosa) — no hay transición ni animación que desactivar. La caja rotada crece unos 4px por lado, que caben de sobra en el padding del folder: no provoca scroll horizontal. En móvil no va: a ancho completo el giro se come el ancho útil y desalinea la columna. */ /* El giro sale de `--giro` si quien la usa se lo pone —así las copias de un carrusel no salen todas peinadas al mismo ángulo— y si no, se queda en el -1.2° de siempre, que es el de la copia de la ficha. */ .amx-v2 .amx-polaroid { transform: rotate(var(--giro, -1.2deg)); } } .amx-v2 .amx-polaroid-pozo { background: var(--copia-placa); border: 1px solid var(--copia-filo); /* Cuadrado, como el área de imagen de una copia instantánea de verdad — y como las fotos 1:1 del catálogo nuevo, que así se ven al tamaño que tenían en el hero apaisado en vez de quedar limitadas por el alto. */ aspect-ratio: 1 / 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* La foto va ABSOLUTA y con el 92 % como caja, no como `max-height: 92%` de un hijo de flex. Safari (WebKit, o sea todo navegador de iPhone) no resuelve un porcentaje de alto contra un pozo cuya altura sale de `aspect-ratio`: ignoraba el max-height, la foto cuadrada se quedaba al 92 % del ANCHO y el pozo 16:9 de las traumáticas la recortaba arriba y abajo. Chrome sí lo resolvía, por eso solo se veía roto en el teléfono. En absoluto el porcentaje va contra el bloque contenedor, que siempre es definido; `contain` conserva la proporción. */ .amx-v2 .amx-polaroid-pozo img { position: absolute; inset: 0; margin: auto; width: 92%; height: 92%; object-fit: contain; } /* Las traumáticas no tienen faldón de texto, así que la foto puede llenar casi todo el pozo — 96 % en vez de 92 % — y se ve más grande sin perder el marco blanco de la Polaroid. */ .amx-v2 .amx-cotiz-partida .amx-polaroid-pozo img { width: 96%; height: 96%; } /* El pozo cuadrado (1:1) deja mucho espacio blanco con fotos apaisadas. Cambiamos a 4:3 para las traumáticas, que es la proporción real de las fotos de producto — se ven como una Polaroid rectangular de verdad, no como un cuadrado con aire a los lados. */ .amx-v2 .amx-cotiz-partida .amx-polaroid-pozo { aspect-ratio: 4 / 3; } /* El faldón. Crece si el nombre es largo en vez de recortarlo, así que ninguna ficha se queda con el rótulo cortado. */ .amx-v2 .amx-polaroid-pie { min-height: 34px; margin-top: 14px; display: flex; flex-direction: column; align-items: center; /* CENTRADO: así se rotula una copia a mano */ justify-content: center; gap: 3px; text-align: center; /* y también cuando el nombre parte en dos */ font-family: var(--mono); line-height: 1.35; color: var(--copia-tinta); /* 16.31:1 sobre el cartón, en los dos temas */ } .amx-v2 .amx-polaroid-nombre { font-size: 13px; letter-spacing: .05em; } /* La procedencia, en segunda línea y más discreta: es la anotación al pie de lo escrito, no un rótulo de la interfaz. 6.46:1 sobre el cartón. */ .amx-v2 .amx-polaroid-datos { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; font-size: 11px; /* piso de texto funcional */ letter-spacing: .1em; text-transform: uppercase; color: var(--copia-tinta-2); } /* Apaisada — la copia de un PAISAJE, no de un objeto. Campos de tiro y Experiencias son fotos de lugar, y el pozo cuadrado de la ficha las recortaba a un cuadrado o las dejaba flotando con aire a los lados. Aquí el pozo va a 16/9 y la foto lo LLENA (`cover`), que es cómo se revela una instantánea de paisaje: al borde, sin márgenes. El faldón ancho de abajo sigue siendo lo que la hace polaroid — §4: geometría, nunca un filtro de foto envejecida. */ .amx-v2 .amx-polaroid--apaisada { /* Las proporciones salen MEDIDAS de la polaroid apaisada de referencia que mandó Saulo: margen lateral al 2.7% del ancho de la foto —no al 4.5% del pozo cuadrado, que enmarcaba de más— y faldón al 15.6% de ese mismo ancho. Con una foto de ~310px en el carrusel: 9px de canto y 48px de faldón contando su hueco y el canto de abajo. */ padding: 9px; } .amx-v2 .amx-polaroid--apaisada .amx-polaroid-pozo { aspect-ratio: 16 / 9; /* Sin filo: en una copia de verdad la emulsión acaba contra el cartón, no tiene una línea dibujada alrededor. El pozo cuadrado lo lleva porque ahí la foto va contenida y con aire; aquí la llena. */ border: 0; } .amx-v2 .amx-polaroid--apaisada .amx-polaroid-pie { min-height: 30px; margin-top: 9px; /* La tipografía de antes, por orden de Saulo: la Archivo en versalitas del rótulo que tenían estas tarjetas, no la mono del faldón de la ficha. */ font-family: var(--sans); } .amx-v2 .amx-polaroid--apaisada .amx-polaroid-nombre { font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; } .amx-v2 .amx-polaroid--apaisada .amx-polaroid-pozo img { /* Pisa el 92 % + `contain` del pozo cuadrado, que existe para los recortes de producto con fondo transparente. Una foto de paisaje no se contiene: se encuadra. */ width: 100%; height: 100%; object-fit: cover; } /* El velo verde. Las fotos vienen de fuentes distintas y con dominantes distintas; esto las hermana. Ya venía en las tarjetas que esto sustituye. */ .amx-v2 .amx-polaroid-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 58, 50, .10) 0%, rgba(23, 58, 50, .28) 100%); pointer-events: none; } /* Ficha de expediente SIN fotografía: 62 de las 192 armas (32 %) no tienen. La polaroid no desaparece — un hueco gris protagonista se ve peor que el layout que sustituye —: se queda el marco y el faldón, y dentro va la silueta del tipo con su leyenda. */ .amx-v2 .amx-polaroid-vacia { width: 100%; height: 100%; box-sizing: border-box; padding: var(--e3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e3); } /* La silueta del expediente sin foto. El .webp aporta solo la FORMA (negro sobre alfa) y entra como máscara; el color lo pone `background-color`, así que sigue a `--silueta` en los dos temas sin duplicar assets ni recolorear con `filter`. Los cinco archivos tienen proporciones muy distintas —de 1.52 la pistola a 4.55 la escopeta—, y por eso `contain` y no `cover`: recortar una silueta la deja sin cañón. */ .amx-v2 .amx-polaroid-silueta { width: 82%; height: 56%; background-color: var(--copia-silueta); -webkit-mask-image: var(--silueta-forma); mask-image: var(--silueta-forma); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* La misma silueta, para el respaldo de los accesorios sin fotografía. OJO, no usa las tintas fijas de la copia: el hueco de esta tarjeta NO es una placa lisa sino un `radial-gradient` que va de `--papel-hi` en el centro a `--lienzo` en los bordes, y ese sí sigue al tema. Con la tinta fija de la copia la silueta se apagaba sobre el borde oscuro. `--hair-hi` está calibrado en los dos temas (3.17:1 claro / 3.40:1 oscuro, WCAG 1.4.11 pide 3:1). */ .amx-v2 .amx-silueta-acc { display: block; width: 78%; background-color: var(--hair-hi); -webkit-mask-image: var(--silueta-forma); mask-image: var(--silueta-forma); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Sin soporte de máscara no se pinta un bloque de color macizo, que sería peor que no tener nada: se cede el sitio y queda la leyenda, que es la que porta la información. */ @supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) { .amx-v2 .amx-polaroid-silueta, .amx-v2 .amx-silueta-acc { display: none; } } .amx-v2 .amx-polaroid-leyenda { font-family: var(--mono); /* 11px, no 10: es texto funcional —dice por qué no hay foto— y por debajo de ese piso falla en pantallas densas. */ font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-align: center; color: var(--copia-tinta-2); /* 6.46:1 sobre la placa, en los dos temas */ } /* ══════════════════════════════════════════════════════════════════════════ EL SELLO DE TINTA — la categoría legal, estampada Tablero de correcciones de Saulo, 8-sep-2026: «Hay que generar sellos que se vean como si fueran de documentos para las categorías de legalidad», y luego «el sello de legalidad no va escrito a mano, va como un sello de tinta». El sello es TEXTO, no una imagen: así la palabra la lee un lector de pantalla, se puede seleccionar, y las tres categorías salen de un mecanismo en vez de tres rasters. Lo que lo hace sello es el giro, el filo y —sobre todo— el desgaste, que se aplica como máscara. El desgaste NO tesela a propósito: un sello es un objeto físico y siempre se gasta igual, así que se estira entero sobre cada estampación. ══════════════════════════════════════════════════════════════════════════ */ .amx-v2 .amx-sello { display: inline-block; padding: 3px 8px 4px; border: 2px solid currentColor; border-radius: 2px; font-family: var(--sans); font-weight: 700; font-size: 12px; /* piso tipográfico de la app */ line-height: 1; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transform: rotate(-6deg); /* estático: §6 no permite animarlo */ /* La tinta no se deposita entera. La máscara recorta el filo Y la palabra a la vez, que es lo que hace que se lea como una sola estampación y no como un recuadro con una etiqueta dentro. */ -webkit-mask-image: url(imagenes/sello-desgaste.webp); mask-image: url(imagenes/sello-desgaste.webp); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } /* Dos colores, no tres. El amarillo que pedía el boceto para SEGURIDAD no llega a 3:1 sobre ningún papel del sitio; Saulo lo pasó a rojo. Como el rojo cubre ya dos categorías, lo que las distingue es la PALABRA, no el color — por eso el sello nunca se abrevia ni se queda sin texto. */ .amx-v2 .amx-sello--civil { color: var(--sello-civil); } .amx-v2 .amx-sello--restr { color: var(--sello-restr); } .amx-v2 .amx-sello--grande { font-size: 15px; padding: 5px 13px 6px; border-width: 3px; } /* El sello de aviso en la cotización traumáticas necesita aire vertical para no aplastarse entre las hojas de arriba y abajo. */ .amx-v2 .amx-cotiz-pie .amx-sello--grande { margin: var(--e4) 0 var(--e3); } /* ══════════════════════════════════════════════════════════════════════════ LA TARJETA EXPEDIENTE — el formato único de Home y Arsenal «Este es el formato visual que deben tener las fichas de armas, accesorios y municiones en HOME y Arsenal. Este formato también debe estar así para la versión móvil.» Dos objetos sobre el lienzo, no una caja: el folder manila detrás con lo mecanografiado, y la copia instantánea encima y a la izquierda, salida del folder como si alguien la hubiera dejado ahí. El folder es GEOMETRÍA CSS, no la fotografía de un folder: estirar la foto deforma la pestaña y el filo de las hojas, y estas tarjetas viven en carruseles de anchos distintos. ══════════════════════════════════════════════════════════════════════════ */ .amx-v2 .amx-exp { position: relative; display: block; width: 100%; padding: 0 0 0 34%; /* el hueco por donde asoma la copia */ border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; } /* El anillo de foco va en el botón, que no lleva recorte: §7 obliga a compensarlo cada vez que un clip-path se lo come, y aquí no hay ninguno. */ .amx-v2 .amx-exp:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } /* El folder ES la fotografía que trajo Saulo, no un dibujo. Estuvo un rato hecho con CSS —color, radio y un degradado para el filo de las hojas— y lo rechazó: quiere el objeto que fotografió. La pestaña, el pliegue y las hojas que asoman vienen ya en el .webp; aquí solo se coloca el texto encima. `background-size: 100% 100%` estira. La proporción del cartón es 1.389 y la del folder en la tarjeta ronda 1.4, así que la deformación es de un 1 %. Todos los items del carrusel se estiran al mismo alto, de modo que todos los folders se deforman igual y ninguno desentona al lado de otro. */ .amx-v2 .amx-exp-folder { position: relative; height: 100%; min-height: 132px; /* Dentro del cartón: arriba por debajo de la pestaña, a la izquierda por donde entra la copia, y abajo por encima del filo de las hojas. */ padding: 20% 7% 11% 13%; /* SIN color de respaldo, y es la corrección de un error mío. Puse `background: var(--carton) url(...)` para que el folder siguiera siendo cartulina si el .webp no llegaba, y ese color rellena el rectángulo ENTERO del elemento — incluida la franja de arriba, donde el 69 % del ancho es transparente porque ahí solo sobresale la pestaña. El respaldo tapaba exactamente la muesca que hace que un folder parezca un folder, y lo dejaba en un rectángulo liso con una línea encima. La silueta del cartón la dibuja SOLO la alfa del .webp. */ background: url(imagenes/folder-manila.webp) 50% 50% / 100% 100% no-repeat; /* La sombra va en `drop-shadow` y no en `box-shadow`: tiene que seguir el recorte del cartón —con su pestaña— y no la caja rectangular. */ filter: drop-shadow(0 1px 2px rgba(23, 27, 25, .16)) drop-shadow(0 6px 12px rgba(23, 27, 25, .20)); } /* La marca, rotulada sobre la pestaña que trae la foto. La pestaña ocupa del 2 % al 34 % del ancho del cartón, así que el rótulo vive en ese carril y se corta con elipsis si la marca es larga — como una etiqueta de verdad. */ .amx-v2 .amx-exp-marca { position: absolute; left: 6%; top: 3.5%; max-width: 27%; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--carton-tinta-2); /* 6.25:1 sobre el cartón */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Lo mecanografiado. El orden lo fija el tablero: nombre, calibre, escala de precio, precio. Las EXISTENCIAS no están, y es deliberado — «ignorar existencias, eso va en la ficha únicamente». */ .amx-v2 .amx-exp-nombre { margin: 0 0 5px; font-family: var(--sans); font-weight: 600; font-size: 17px; line-height: 1.14; letter-spacing: .02em; text-transform: uppercase; color: var(--carton-tinta); /* 13.94:1 sobre el cartón */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .amx-v2 .amx-exp-dato { margin: 0 0 4px; font-family: var(--mono); font-size: 13px; color: var(--carton-tinta-2); /* 6.25:1 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .amx-v2 .amx-exp-precio { margin: 6px 0 0; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--carton-tinta); font-variant-numeric: tabular-nums; } /* ── La copia, encima y girada ───────────────────────────────────────────── Reusa `.amx-polaroid`, que ya es diegética y no sigue al tema. Aquí solo se la coloca: el giro es estático y mínimo, y el ancho va en % para que la tarjeta funcione igual en un carrusel de 300px que en una rejilla ancha. */ .amx-v2 .amx-exp-copia { position: absolute; left: 0; top: 50%; width: 36%; transform: translateY(-50%) rotate(-3deg); z-index: 2; } /* El sello va CENTRADO en el faldón. El pie ya venía centrado por dentro, pero el aire de arriba y el de abajo no eran el mismo: el `margin-top: 14px` que separa el pie de la fotografía, más 9px de padding propio, contra los 3px de abajo — 23 arriba y 3 abajo, y el sello caía al fondo con un hueco encima. Ahora los dos lados miden 10px y el sello queda en medio de la banda. */ .amx-v2 .amx-exp-copia .amx-polaroid { padding: 8px 8px 10px; transform: none; } .amx-v2 .amx-exp-copia .amx-polaroid-pie { margin-top: 10px; min-height: 26px; padding: 0; gap: 0; } /* El comparador y el distintivo van sobre el cartón, arriba a la derecha, que es la esquina que el texto mecanografiado deja libre. */ .amx-v2 .amx-exp-comparar { position: absolute; top: 6px; right: 6px; z-index: 3; min-width: 30px; min-height: 30px; /* área táctil; el piso de 44px es para los controles de nav, no para un accesorio dentro de una tarjeta */ padding: 4px 7px; background: var(--carton-alto); border: 1px solid var(--carton-filo); border-radius: var(--radio-sm); font-family: var(--mono); font-size: 13px; font-weight: 700; line-height: 1; color: var(--carton-tinta-2); cursor: pointer; } .amx-v2 .amx-exp-comparar[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--sobre-marca); } .amx-v2 .amx-exp-distintivo { position: absolute; top: 6px; right: 6px; z-index: 3; padding: 3px 8px 4px; border-radius: var(--radio-sm); background: var(--acento); color: var(--sobre-marca); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1; } /* Con las dos cosas a la vez el distintivo se aparta a la izquierda. */ .amx-v2 .amx-exp-comparar ~ .amx-exp-distintivo { right: 44px; } /* ══════════════════════════════════════════════════════════════════════════ EL DESTACADO DE LA PORTADA — el mismo folder, abierto «En el sitio de escritorio caben al menos dos armas destacadas para no desaprovechar el espacio. En el sitio móvil dejamos solo 1.» La segunda se oculta por CSS y no por `vp.isDesktop`: el hook parte de `window.innerWidth` en el primer render, y la portada es la página que más gente ve de primeras. Una @media no puede equivocarse en el primer pintado. ══════════════════════════════════════════════════════════════════════════ */ .amx-v2 .amx-dest-lista { display: grid; gap: var(--e4); } @media (min-width: 1024px) { .amx-v2 .amx-dest-lista { grid-template-columns: 1fr 1fr; } } .amx-v2 .amx-dest-lista > :nth-child(n + 2) { display: none; } @media (min-width: 1024px) { .amx-v2 .amx-dest-lista > :nth-child(n + 2) { display: block; } } .amx-v2 .amx-dest-folder { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); gap: var(--e4); align-items: center; /* El cartón manda la proporción, no al revés. Esto estuvo con el folder estirado a la caja: el bloque destacado es 1.86 y el cartón 1.389, así que `background-size: 100% 100%` ensanchaba la pestaña casi al doble y torcía el pliegue de la solapa — se leía como un error, no como un folder. Con `aspect-ratio` el bloque toma el alto que le corresponde y la fotografía no se deforma. Si el contenido creciera más que eso, el folder crece con él: `aspect-ratio` cede ante el contenido, que es justo lo que se quiere para que nada se desborde. */ aspect-ratio: 1000 / 720; padding: 13% 5% 7% 6%; /* SIN color de respaldo, y es la corrección de un error mío. Puse `background: var(--carton) url(...)` para que el folder siguiera siendo cartulina si el .webp no llegaba, y ese color rellena el rectángulo ENTERO del elemento — incluida la franja de arriba, donde el 69 % del ancho es transparente porque ahí solo sobresale la pestaña. El respaldo tapaba exactamente la muesca que hace que un folder parezca un folder, y lo dejaba en un rectángulo liso con una línea encima. La silueta del cartón la dibuja SOLO la alfa del .webp. */ background: url(imagenes/folder-manila.webp) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 1px 2px rgba(23, 27, 25, .16)) drop-shadow(0 8px 16px rgba(23, 27, 25, .20)); } /* El rótulo del bloque va sobre la pestaña de la foto, igual que la marca en la tarjeta. */ .amx-v2 .amx-dest-rotulo { position: absolute; left: 4%; top: 2.5%; max-width: 26%; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--carton-tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .amx-v2 .amx-dest-procedencia { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e3); font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--carton-tinta-2); /* 6.25:1 sobre el cartón */ } /* Las especificaciones, mecanografiadas a dos columnas: etiqueta en versalitas y valor alineado. Es una
y no una tabla porque son pares sueltos, no una rejilla de datos comparables. */ .amx-v2 .amx-dest-specs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px var(--e3); margin: 0; font-family: var(--mono); font-size: 13.5px; } .amx-v2 .amx-dest-specs dt { letter-spacing: .1em; text-transform: uppercase; color: var(--carton-tinta-2); } .amx-v2 .amx-dest-specs dd { margin: 0; color: var(--carton-tinta); /* 13.94:1 */ font-variant-numeric: tabular-nums; } /* El sello encabeza la columna de datos, en flujo. Estuvo un rato en `position: absolute` sobre el cartón —más parecido al boceto, donde pisa el texto— pero obligaba a reservarle sitio con un padding y dejaba un hueco muerto arriba a la izquierda. En flujo no hay hueco y sigue leyéndose como lo primero que se estampó. */ .amx-v2 .amx-dest-sello { margin: 0 0 var(--e3) 2px; } /* La copia ES el enlace. El anillo de foco va aquí, en un botón sin recorte. */ .amx-v2 .amx-dest-copia { display: block; padding: 0; background: none; border: 0; cursor: pointer; transform: rotate(-1.5deg); /* estático; §6 no permite animarlo */ } .amx-v2 .amx-dest-copia:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; } .amx-v2 .amx-dest-copia .amx-polaroid { transform: none; } .amx-v2 .amx-dest-copia .amx-polaroid-nombre { font-size: 17px; } /* Móvil: el folder NO se cierra. Apilar la copia debajo del texto hacía el bloque más alto que ancho (0.836 medido a 560px) y `aspect-ratio` cede ante el contenido, así que el cartón se estiraba a lo alto y la pestaña salía deformada — el mismo defecto que en escritorio, del revés. Un folder abierto es apaisado a cualquier tamaño, así que las dos columnas se quedan y lo que encoge es la copia. */ @media (max-width: 719px) { .amx-v2 .amx-dest-folder { grid-template-columns: minmax(0, 1fr) minmax(0, 38%); gap: var(--e3); max-width: 100%; overflow: hidden; /* 27-sep-2026 (Saulo: «textos que salen del folder»): con `overflow: hidden` el aspect-ratio no cedía ante el contenido y se cortaban hasta 131 px de datos a 360. Ahora el folder crece con lo que lleva y la foto va como 9-slice, igual que la ficha (§5.5): la pestaña no se tuerce al crecer. */ --manila-escala: .36; aspect-ratio: auto; isolation: isolate; background: none; padding: calc(120px * var(--manila-escala) + var(--e3)) 5% calc(60px * var(--manila-escala) + var(--e3)) 6%; } .amx-v2 .amx-dest-folder::before { content: ''; position: absolute; inset: 0; z-index: -1; border-style: solid; border-width: 0; border-image-source: url(imagenes/folder-manila.webp); border-image-slice: 140 60 70 370 fill; border-image-width: calc(140px * var(--manila-escala)) calc(60px * var(--manila-escala)) calc(70px * var(--manila-escala)) calc(370px * var(--manila-escala)); } .amx-v2 .amx-dest-specs { grid-template-columns: minmax(0, 1fr); gap: 2px; font-size: 13px; } .amx-v2 .amx-dest-specs dt { font-size: 11.5px; } .amx-v2 .amx-dest-copia .amx-polaroid-nombre { font-size: 14px; } /* La pestaña llega al 34 % del cartón; el rótulo puede ocuparla entera antes que salir cortado con elipsis. */ .amx-v2 .amx-dest-rotulo { max-width: 32%; font-size: 11px; letter-spacing: .1em; } } /* ══════════════════════════════════════════════════════════════════════════ LA FICHA DE CALIBRE — cartulina de fichero y marco de época Tablero de Saulo, 8-sep-2026: «La ficha de información va con estilo de ficha bibliográfica antigua» y «la foto del calibre va dentro de un marco de foto antiguo». Aquí SÍ entran dos rasters, y es lo contrario de lo que pasó con el folder: el rayado y el papel envejecido de una ficha de fichero, y sobre todo el borde festoneado de una copia de época, no se pueden dibujar con CSS sin que canten. El marco va con `border-image`, que reparte las ondas por los cuatro lados sin deformarlas — que es exactamente para lo que existe. ══════════════════════════════════════════════════════════════════════════ */ .amx-v2 .amx-calibre { position: relative; display: flex; align-items: stretch; gap: var(--e3); height: 100%; /* El padding superior es MENOR que el resto: la cartulina trae una línea roja impresa a la altura de la primera guía, y con 14px el rótulo del sistema caía justo encima y se perdía. */ padding: 8px 14px 14px; /* El color va DEBAJO de la imagen: si el .webp no llega, la ficha sigue siendo cartulina y la tinta conserva su contraste. */ background: var(--ficha) url(imagenes/ficha-biblioteca.webp) 50% 50% / 100% 100% no-repeat; border-radius: 3px; /* una ficha de cartulina no lleva radio */ box-shadow: var(--sombra); cursor: pointer; text-align: left; } .amx-v2 .amx-calibre:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } .amx-v2 .amx-calibre-datos { display: flex; flex-direction: column; flex: 1; min-width: 0; } .amx-v2 .amx-calibre-sistema { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ficha-tinta-2); /* 5.07:1 incluso sobre el rayado azul */ } .amx-v2 .amx-calibre-id { margin-top: var(--e2); font-family: var(--sans); font-weight: 700; font-size: 20px; line-height: 1; color: var(--ficha-tinta); /* 11.29:1 sobre el rayado */ } .amx-v2 .amx-calibre-uso { flex: 1; margin-top: 6px; font-family: var(--sans); font-size: 15px; line-height: 1.4; color: var(--ficha-tinta-2); } /* La cuenta de armas iba en el verde de marca. Sobre esta cartulina ese verde se queda en 4.84:1 y el rojo de acción cae a 4.44:1 sobre el rayado azul, por debajo del mínimo de texto: en la ficha la llamada la hace la TINTA, que es además lo que haría alguien escribiendo en una ficha de fichero. */ .amx-v2 .amx-calibre-n { margin-top: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; color: var(--ficha-tinta); } /* El cartucho va SIN marco. Estuvo dentro de un marco de época festoneado —lo pedía el tablero— pero Saulo lo descartó al verlo montado: sobre la cartulina el marco es papel crema sobre papel crema y ni con sombra acababa de leerse, y el festón, reducido a 13px de borde, salía como una línea de puntos. Queda el .webp del cartucho apoyado en la ficha, que es lo que se aprobó. */ .amx-v2 .amx-calibre-marco { flex: 0 0 auto; align-self: stretch; /* el cartucho apoyado en el piso, que es lo que deja comparar de un vistazo las alturas reales */ width: 72px; display: flex; align-items: flex-end; justify-content: center; } .amx-v2 .amx-calibre-marco img { display: block; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; } /* ══════════════════════════════════════════════════════════════════════════ LA CARTA DE LOTERÍA — categorías de arma y de accesorio (tablero 8-sep-2026) ══════════════════════════════════════════════════════════════════════════ Sustituye a la tarjeta con foto de escena y tinte verde. La foto no se pierde: sigue viva en el hub del arsenal (`CATEGORY_HEROS`). Se reproduce el FORMATO, no una carta concreta: cartón blanco, lámina amarilla con filete, número arriba a la izquierda y nombre abajo en el cartón. El número NO es el de la baraja — es cuántas piezas hay en la categoría, que es lo que pidió el tablero. La figura entra como MÁSCARA sobre las siluetas que ya usan la copia y los accesorios sin foto (`imagenes/silueta-*.webp`): un asset menos y el color lo pone el CSS. Si algún día hay ilustración propia por categoría, se cambia `--silueta-forma` y nada más. */ .amx-v2 .amx-loteria { display: flex; flex-direction: column; width: 100%; /* 5.5 × 8.5 cm, la carta de mesa. `aspect-ratio` cede ante el contenido, y aquí el contenido que puede crecer es el pie (dos líneas en «Portacargadores y cananas»), así que la lámina es la que encoge — nunca el cartón. */ aspect-ratio: 55 / 85; padding: 5.5%; border: 1px solid var(--loteria-filo); border-radius: 2px; /* una carta impresa no tiene esquinas redondeadas */ background: var(--loteria-carton); box-shadow: var(--sombra); font: inherit; color: inherit; text-align: center; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; } .amx-v2 .amx-loteria:hover { transform: translateY(-3px); box-shadow: var(--sombra-hover); } .amx-v2 .amx-loteria:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; } .amx-v2 .amx-loteria-lam { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--loteria-lamina); border: 1.5px solid var(--loteria-tinta); } /* El número de la carta = cuántas piezas hay en la categoría. Va dentro de la lámina, como en la baraja, y en mono porque es un dato. 10.13:1. */ .amx-v2 .amx-loteria-num { position: absolute; left: 7px; top: 5px; font-family: var(--mono); font-weight: 700; font-size: 16px; line-height: 1; color: var(--loteria-tinta); } .amx-v2 .amx-loteria-fig { width: 88%; height: 88%; background-color: var(--loteria-tinta); -webkit-mask-image: var(--silueta-forma); mask-image: var(--silueta-forma); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Los cañones largos entran GIRADOS. Con `mask-size: contain` una silueta de 4.55 de proporción —la escopeta— dentro de una carta vertical se queda en un hilo de 39px de alto mientras la pistola llena media lámina: las nueve cartas se leían a escalas distintas. Girada, la diagonal de la lámina es lo que la limita y todas ocupan lo mismo. Es además como se dibuja en la baraja: el objeto llena el cuadro, no flota en él. El giro es estático (§6 prohíbe animar otra cosa que no sea `transform`, y aquí no hay transición que desactivar) y no desborda: `overflow` no hace falta porque la lámina tiene fondo propio y el recorte lo pone la propia caja. */ .amx-v2 .amx-loteria-fig--largo { transform: rotate(-30deg) scale(1.18); } /* Sin soporte de máscara la figura sería un bloque negro macizo tapando la lámina: se cede el sitio y quedan el número y el nombre, que son los que portan la información. Mismo criterio que las otras dos siluetas. */ @supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) { .amx-v2 .amx-loteria-fig { display: none; } } .amx-v2 .amx-loteria-pie { flex: 0 0 auto; padding-top: 7%; font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 1.06; letter-spacing: .04em; text-transform: uppercase; color: var(--loteria-tinta); /* 16.38:1 sobre el cartón */ } @media (max-width: 719px) { .amx-v2 .amx-loteria-pie { font-size: 12.5px; } .amx-v2 .amx-loteria-num { font-size: 14px; left: 5px; top: 4px; } } /* El tablero pide las cartas en rejilla, no en carrusel: cinco de arma y las de accesorio que tengan existencias. */ .amx-v2 .amx-loteria-mesa { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e3); } @media (max-width: 719px) { .amx-v2 .amx-loteria-mesa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); } } /* Cartas de lotería con ilustración completa (carta-*.webp). Reemplazan la estructura de lámina + silueta + número + nombre por una sola imagen que contiene todo: fondo de color, ilustración estilo Lotería mexicana, número en la esquina y nombre abajo. */ .amx-v2 .amx-loteria-carta-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border: none; border-radius: 0; } .amx-v2 .amx-loteria:has(.amx-loteria-carta-img) { border: 2px solid var(--loteria-filo); box-shadow: var(--sombra); padding: 0; overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════════ EL PUESTO DE MUNICIÓN — la caja en la mesa, con su letrero (tablero 8-sep-2026) ══════════════════════════════════════════════════════════════════════════ Sustituye a la tarjeta de calibre con el cartucho flotando sobre un degradado. Cada calibre destacado es un PUESTO: el cartel amarillo clavado en su vara, la caja de la marca apoyada en la tabla y, al pasar por encima, la luz que se enciende detrás. LA MESA Y LA VARA SON BOCETO. Van en SVG mientras llegan las fotos reales, y por eso viven las dos en una sola variable cada una: cambiar `--mesa-madera` por un `url(imagenes/mesa.webp)` —y `--palo-veta` por su recorte— basta para sustituirlas sin tocar una sola regla de los componentes. La tabla se repite en X y NO en Y: la veta va dibujada en horizontal y vuelve a la misma altura en los dos extremos del mosaico, así que dos puestos contiguos forman una mesa continua. Es lo que deja poner cuatro en fila en escritorio y dos por fila en móvil sin que se note el corte. */ .amx-v2 { --mesa-madera: url("data:image/svg+xml, "); --palo-veta: linear-gradient(90deg, #8A6B49 0%, var(--palo) 32%, #CDAA82 52%, var(--palo) 74%, #8A6B49 100%); } .amx-v2 .amx-puestos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; /* sin hueco: las tablas se tocan y la mesa sale de una pieza */ } @media (max-width: 719px) { .amx-v2 .amx-puestos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .amx-v2 .amx-puesto { position: relative; display: block; width: 100%; /* Cuadrado: el cartel, la caja y la tabla apretados como en un puesto. Más alto dejaba un palmo de vara al aire entre el cartel y el cartón. */ aspect-ratio: 1 / 1; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; } .amx-v2 .amx-puesto:focus-visible { outline: 2px solid var(--acento); outline-offset: -3px; } /* La tabla. Va en `::after` y no en un hijo para que el orden de pintado la deje debajo de todo sin pelearse por el z-index con el contenido. */ .amx-v2 .amx-puesto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: var(--mesa-madera) 0 0 / auto 100% repeat-x; z-index: 0; } /* El cartel. Texto de verdad, no dibujado dentro de la foto: el calibre sale del dato y lo lee un lector de pantalla. La foto pone solo el cartón. El giro es estático —un cartel clavado a mano nunca queda a plomo— y alterna de signo entre puestos pares e impares para que la fila no salga peinada. La sombra va en `drop-shadow` y no en `box-shadow`: el cartón está recortado con alfa y tiene los cantos a mano, así que una sombra de caja dibujaría el rectángulo que la foto justamente no es. */ .amx-v2 .amx-puesto-letrero { position: absolute; left: 15%; right: 15%; top: 3%; z-index: 3; /* Generoso y asimétrico por dos razones: el cartón de la foto es casi cuadrado (900x747) y estirarlo a una cinta de 4:1 le borra los cantos cortados a mano; y en la foto el canto de abajo cae más que el de arriba, así que el rótulo necesita más aire por debajo para no montarse en él. */ padding: 22px 12px 28px; background: var(--letrero) 50% 50% / 100% 100% no-repeat; filter: drop-shadow(0 3px 4px rgba(23, 27, 25, .34)); transform: rotate(-2.2deg); } .amx-v2 .amx-puesto:nth-child(even) .amx-puesto-letrero { transform: rotate(1.8deg); } .amx-v2 .amx-puesto-rotulo { display: block; font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; text-align: center; color: var(--letrero-tinta); /* 11.84:1 sobre la cara del cartel */ } /* La vara. Sale del cartel y se pierde detrás de la caja — no llega a la tabla a propósito: el cartón la tapa, que es lo que pasa en un puesto de verdad. */ .amx-v2 .amx-puesto-palo { position: absolute; left: 50%; top: 23%; z-index: 1; width: 9px; height: 52%; margin-left: -4.5px; background: var(--palo-veta); border-radius: 1px; } /* La luz de detrás. Apagada de salida; se enciende al pasar por encima Y con el foco de teclado, que si no el efecto solo existiría para el ratón. */ .amx-v2 .amx-puesto-luz { position: absolute; left: 50%; bottom: 10%; /* baja con la caja: es su luz de detrás */ z-index: 1; width: 96%; aspect-ratio: 1 / 1; margin-left: -48%; border-radius: 50%; background: radial-gradient(closest-side, var(--puesto-luz) 0%, rgba(255, 233, 168, .45) 45%, rgba(255, 233, 168, 0) 78%); opacity: 0; transition: opacity .22s ease; pointer-events: none; } .amx-v2 .amx-puesto:hover .amx-puesto-luz, .amx-v2 .amx-puesto:focus-visible .amx-puesto-luz { opacity: .85; } /* La caja apoyada (revisado 9-sep-2026 — antes flotaba, y aquí está medido por qué; los PNG no tenían la culpa: su recorte es ajustado, 0 % de aire). 1. `bottom` no marca la base de la CAJA sino el canto del recorte, y en las fotos PMC la caja se levanta sobre los cartuchos sueltos que tiene delante: su base cae un 22 % por encima de ese canto. Con `bottom: 18 %` en un puesto de 312 px, esa base quedaba a 89 px del suelo — 14 px POR ENCIMA del borde trasero de la tabla (74.9 px). Se apoyaba en el aire. A 10 % la base cae a 64 px, dentro de los 60 px de superficie dibujada (la tabla mide 24 % y su quinta parte de abajo es el canto, o sea que la madera que se pisa va de 15 px a 74.9 px). 2. La sombra de contacto era un `` elíptico fijo que además estaba colocado 3 px POR ENCIMA del canto de la imagen, así que la tapaba la propia caja. Ahora va en el `drop-shadow` de la foto: sigue la silueta, que es lo único que sirve cuando la caja de GB ocupa el 45 % del ancho y la PMC el 91 %, y se coloca sola con cualquier altura de caja. */ .amx-v2 .amx-puesto-caja { position: absolute; left: 6%; right: 6%; bottom: 10%; z-index: 2; height: 48%; object-fit: contain; object-position: bottom center; /* nunca deja aire ABAJO: el sobrante de `contain` se va siempre arriba */ filter: drop-shadow(0 3px 2px rgba(23, 27, 25, .46)) drop-shadow(0 9px 9px rgba(23, 27, 25, .26)); } @media (max-width: 719px) { /* A media columna el cuadrado deja 179px de alto y no caben cartel, caja y tabla sin apretarse: en móvil el puesto crece a lo alto, no a lo ancho. */ .amx-v2 .amx-puesto { aspect-ratio: 4 / 5; } .amx-v2 .amx-puesto-rotulo { font-size: 14px; } /* Menos aire que en escritorio pero la misma proporción de cartón: con los 7/4/8 de cuando era un rectángulo de color, la foto salía una cinta. */ .amx-v2 .amx-puesto-letrero { left: 11%; right: 11%; padding: 14px 8px 18px; } } /* ══════════════════════════════════════════════════════════════════════════ PIE DE OFICIO — los enlaces del pie (window.PieDeSitio, en ui.jsx) BLOQUE NUEVO AL FINAL, y no estilo inline, porque `:hover` y `:focus-visible` no existen en un objeto `style={{}}`. Es lo único del pie que no cabe inline; todo lo demás sigue allí. EN REPOSO, LOS SEIS ENLACES DE TEXTO SE MARCAN. Decisión de Saulo del 11-sep-2026, que deja sin efecto la del 9-sep («en reposo no se distinguen del texto», «lo único que los distingue es que se iluminan al hacer hover»). Literal, con captura del pie: «Tenías razón respecto a la necesidad de resaltar de alguna forma las palabras que tienen enlace. Hazlo con un subrayado ligero y un tono un poco más claro que el resto del texto de cada oración». Alcance fijado al preguntarle: los seis enlaces de texto (clase `amx-pie-enlace-texto`) sí; «GitHub», icono + palabra, NO: se queda sin subrayado y con la tinta de su estrato. La cursiva que se retiró el 9-sep en FUENTES no vuelve. Historial completo en el bloque del pie de ui.jsx. Con el subrayado, WCAG 1.4.1 —que «esto es un enlace» no dependa solo del color—, que el 9-sep quedaba incumplido a sabiendas, se cumple en los seis. EL ROJO DEL HOVER es #CE1126, el rojo de la bandera de México, elegido por Saulo porque los rojos de la paleta le resultaron «desabridos y sin saturación». Es un valor literal a propósito: no es un token del sitio y no se añade a `:root` sin que él lo decida. ⚠ NO PASA EL UMBRAL DEL REPO. Medido con `node .claude/skills/fidelidad-diseno/scripts/contraste.mjs '#CE1126' '#173A32'`: texto, crédito y aviso --sobre-marca #F3EFE4 10.83:1 AA texto, fuentes --sobre-marca-dim #B8C2BA 6.79:1 AA ENLACE, crédito y aviso crema + L 0.05 #FFFFF4 12.36:1 AA ENLACE, fuentes dim + L 0.05 #C8D2CA 8.02:1 AA subrayado al 50 % crédito · fuentes 4.33:1 · 3.19:1 (gráfico, pide 3) HOVER y FOCO rojo bandera #CE1126 2.21:1 ✗ DÉBIL anillo de foco --sobre-marca #F3EFE4 10.83:1 (1.4.11 pide 3) DESIGN.md §7 pide >= 4.5:1 para todo texto que porte información. 2.21:1 no llega, ni al 3:1 de un indicador. Queda puesto por instrucción expresa de Saulo, informado del número. El texto NO se vuelve ilegible —solo se apaga mientras el ratón está encima, y el estado de reposo sí cumple—, pero el estado activo del enlace es el que se lee peor, que es al revés de lo deseable. Alternativas que SÍ medirían, si alguna vez se reabre: `--rojo-sobre-marca` #F29C8C (5.87:1, el token que el repo ya tiene para rojo sobre la marca) o aclarar el bandera hasta ~#E8556B (4.5:1). No las apliques por tu cuenta. El anillo de foco lo pone `.amx-sobre-verde :focus-visible` (más arriba en este archivo): el pie lleva esa clase, así que el foco SIEMPRE se ve en crema a 10.83:1 y no depende de este rojo. Por eso quien navega con teclado sabe dónde está aunque el color del texto no mida. ══════════════════════════════════════════════════════════════════════════ */ .amx-v2 .amx-pie-enlace { color: inherit; text-decoration: none; } /* Los SEIS enlaces de texto (Interno y Externo en ui.jsx). GitHub no lleva la clase. Va antes del hover, que le gana por especificidad. */ .amx-v2 .amx-pie-enlace-texto { /* «Un tono un poco más claro que el resto del texto de cada oración»: el mismo paso de luminosidad sobre la tinta HEREDADA del párrafo —en `color`, `currentColor` es la del padre—. Paso fijo de L y no `color-mix` con blanco: sobre la crema (L 0.95) un porcentaje fijo no se ve y sobre la dim se pasa. Sin sintaxis de color relativo el navegador descarta la línea y se queda con el `inherit` de arriba: el subrayado sigue marcando. */ color: oklch(from currentColor calc(l + 0.05) c h); /* «Subrayado ligero»: 1px, separado del texto y a media tinta del enlace. */ text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); } .amx-v2 .amx-pie-enlace:hover, .amx-v2 .amx-pie-enlace:focus-visible { color: #CE1126; /* rojo de la bandera de México — 2.21:1, ver arriba */ text-decoration: none; /* en hover y foco el subrayado se va: señala el rojo */ } /* ══════════════════════════════════════════════════════════════════════════ LA FICHA DE ARMA — el expediente completo (rediseño del 13-sep-2026) Decidido con Saulo sección por sección (rama opus-5/red-fichas-de-armas): dos solapas por filas en escritorio (sin nada fijo) y «pila de documentos + talón fijo» en móvil; papelería física —clips, grapas, cinta canela, cinta Dymo, papel autocopiante— y NINGUNA textura ni filtro de envejecido. Cada dato es un papel de oficina distinto dentro del folder manila: copia instantánea con clip y sello legal · talón de comprobante (precio) ficha de fichero (ficha técnica) · tarjeta de almacén (existencias) papel milimétrico + registro (historial) · anexos grapados (PDFs) separadores de folder + hoja de oficio (Legalidad · Usos · Antecedentes) y fuera del folder: la vitrina (munición y accesorios), la tele de los 80, la tarjeta de comentarios y los expedientes de armas similares. UN SOLO CORTE, a 1024px, como el resto del expediente: por debajo, pila; por encima, dos columnas. La tableta no es objetivo; el móvil sí, y se mide en los anchos reales de México (360 · 384 · 390 · 393 · 402 · 412 · 414 · 440). Los papeles son OBJETOS (ver los tokens de la papelería en `:root`): no siguen al tema. Por eso dentro de ellos no se usa PALETTE ni CLARO —que sí lo siguen— y el anillo de foco va en tinta, no en el rojo del lienzo. ══════════════════════════════════════════════════════════════════════════ */ /* Texto solo para lectores de pantalla (la cinta Dymo parte sus letras). */ .amx-v2 .amx-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* El anillo de foco sobre los papeles claros: en tinta. El rojo del lienzo (--rojo-txt) en oscuro es un salmón claro que sobre el papel no llega a 2:1. */ .amx-v2 .amx-carpeta :focus-visible, .amx-v2 .amx-vitrina :focus-visible, .amx-v2 .amx-comentarios :focus-visible, .amx-v2 .amx-tarjetita :focus-visible, .amx-v2 .amx-talon :focus-visible { outline-color: var(--manila-tinta); } /* ── EL FOLDER MANILA — la foto de la Home como 9-slice ─────────────────── Misma técnica que el tutorial (PR #146): `folder-manila.webp` (1000×720) con `border-image`. Las cuatro esquinas quedan fijas —la pestaña entera cabe en la de arriba a la izquierda— y solo se estiran el canto de la solapa, el filo de las hojas y el papel liso del centro. Así el folder mide lo que mida la ficha (hasta 4000px de alto en móvil) sin torcer la pestaña. Cortes medidos sobre la foto: la solapa acaba en y≈120 y la curva de la pestaña en x≈360; las hojas asoman de y≈660 a 710. Va en un pseudo-elemento por la sombra: un `filter` en la caja sombrearía también todo lo que lleva encima. PENUMBRA: en oscuro `--manila-luz` baja el brillo de la foto al 68 %. Es luz, no un filtro de envejecido: el cartón no cambia de tono, se apaga. */ .amx-v2 .amx-carpeta { --manila-escala: .36; position: relative; isolation: isolate; padding: calc(120px * var(--manila-escala) + var(--e4)) var(--e4) calc(60px * var(--manila-escala) + var(--e5)); color: var(--manila-tinta); } .amx-v2 .amx-carpeta::before { content: ''; position: absolute; inset: 0; z-index: -1; border-style: solid; border-width: 0; border-image-source: url(imagenes/folder-manila.webp); border-image-slice: 140 60 70 370 fill; border-image-width: calc(140px * var(--manila-escala)) calc(60px * var(--manila-escala)) calc(70px * var(--manila-escala)) calc(370px * var(--manila-escala)); filter: brightness(var(--manila-luz)) drop-shadow(0 1px 2px rgba(23, 27, 25, .16)) drop-shadow(0 8px 16px rgba(23, 27, 25, .20)); } @media (min-width: 1024px) { .amx-v2 .amx-carpeta { --manila-escala: .5; padding: calc(120px * var(--manila-escala) + var(--e5)) 40px calc(60px * var(--manila-escala) + 44px); } } /* El tipo, rotulado sobre la pestaña de la foto (como la marca en las tarjetas y el folio en el tutorial). La pestaña va de x≈20 a 340 y de y≈0 a 115. */ .amx-v2 .amx-carpeta-rotulo { position: absolute; left: calc(40px * var(--manila-escala)); top: calc(14px * var(--manila-escala)); width: calc(290px * var(--manila-escala)); height: calc(100px * var(--manila-escala)); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--manila-tinta-2); white-space: nowrap; overflow: hidden; } /* ── Las dos solapas, por filas ───────────────────────────────────────────── El DOM va en el orden de lectura del teléfono: cabecera, foto, ficha técnica, comprobante, tarjeta de almacén, Legalidad · Usos · Antecedentes e historial. En escritorio las áreas lo reparten sin reordenar el DOM (el teclado y el lector de pantalla siguen el mismo camino), y lo reparten POR FILAS, como pidió Saulo el 13-sep-2026: foto │ cabecera + ficha técnica ← lo primero que se ve comprobante │ tarjeta de almacén al abrir el folder ───────────────────────────────────────── Legalidad… │ historial de precios ← lo que revela el scroll NADA SE QUEDA FIJO. Hubo una columna izquierda con `position: sticky` (copia, sello y talón siguiendo al scroll) y Saulo la retiró: «rompe completamente la estética vintage/diegética». Son papeles sobre un folder; un papel no persigue a quien lee. */ .amx-v2 .amx-carpeta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e5); } .amx-v2 .amx-carpeta-grid > * { min-width: 0; } @media (min-width: 1024px) { .amx-v2 .amx-carpeta-grid { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); grid-template-areas: "foto cab" "foto ficha" "talon almacen" "legal historial"; grid-template-rows: auto 1fr auto auto; column-gap: var(--e6); row-gap: 40px; align-items: start; } .amx-v2 .amx-carpeta-cab { grid-area: cab; } .amx-v2 .amx-carpeta-foto { grid-area: foto; } .amx-v2 .amx-carpeta-ficha { grid-area: ficha; margin-top: -16px; } /* la ficha, pegada al nombre */ .amx-v2 .amx-carpeta-talon { grid-area: talon; } .amx-v2 .amx-carpeta-almacen { grid-area: almacen; } .amx-v2 .amx-carpeta-legal { grid-area: legal; } .amx-v2 .amx-carpeta-historial { grid-area: historial; } } /* LA FICHA DE CALIBRE (27-sep-2026, DESIGN.md §5.12): el mismo folder sin talón ni tarjeta de almacén. Desde 1024, copia | cabecera y ficha; debajo, hojas | milimétrico. Las hojas de las escopetas también se quedan en su columna (Saulo). */ @media (min-width: 1024px) { .amx-v2 .amx-carpeta--calibre .amx-carpeta-grid { grid-template-areas: "foto cab" "foto ficha" "legal historial"; grid-template-rows: auto 1fr auto; } } .amx-v2 .amx-carpeta-clase { margin-bottom: 6px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--manila-tinta-2); } .amx-v2 .amx-carpeta-uso { margin-top: 6px; font-family: var(--mono); font-size: 13.5px; color: var(--manila-tinta); } .amx-v2 .amx-carpeta-alias { margin-top: 4px; font-size: 14px; color: var(--manila-tinta-2); } .amx-v2 .amx-carpeta-art { font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; color: var(--oficio-tinta-2); } /* LA COMPARATIVA DE TAMAÑOS (Saulo en Penpot, 27-sep-2026): sustituye a la regla de energía. El cartucho y un bolígrafo de 15 cm sobre un eje en milímetros: `--mm` son los píxeles de un milímetro (2 en móvil, 3 en escritorio) y `--pie` el alto fijo de los pies, para que todas las fotos se apoyen en el cero. En escritorio llena la columna derecha. Tintas del milimétrico: el papel no sigue al tema. */ .amx-v2 .amx-carpeta--calibre .amx-carpeta-historial { align-self: stretch; } .amx-v2 .amx-carpeta--calibre .amx-milimetrico { height: 100%; box-sizing: border-box; } .amx-v2 .amx-tamanos { --pie: 34px; } .amx-v2 .amx-tamanos-titulo { margin-bottom: var(--e3); font-family: var(--mono); font-size: 12.5px; letter-spacing: .14em; font-variant: small-caps; color: var(--milimetrico-tinta-2); } .amx-v2 .amx-tamanos-lienzo { display: flex; align-items: flex-end; gap: 8px; } .amx-v2 .amx-tamanos-eje { position: relative; flex: none; width: 28px; height: calc(150 * var(--mm)); margin-bottom: var(--pie); border-right: 1px solid var(--milimetrico-linea); font-family: var(--mono); font-size: 11px; color: var(--milimetrico-tinta-2); } .amx-v2 .amx-tamanos-eje span { position: absolute; right: 5px; transform: translateY(50%); } .amx-v2 .amx-tamanos-fila { flex: 1; min-width: 0; overflow-x: auto; display: flex; align-items: flex-end; gap: 12px; background-image: repeating-linear-gradient(to top, var(--milimetrico-linea) 0 1px, transparent 1px calc(25 * var(--mm))); background-size: 100% calc(150 * var(--mm) + 1px); background-position: left 0 bottom var(--pie); background-repeat: no-repeat; } .amx-v2 .amx-tamanos-pieza { flex: none; margin: 0; display: flex; flex-direction: column; align-items: center; min-width: 58px; } .amx-v2 .amx-tamanos-pieza img { display: block; width: auto; } .amx-v2 .amx-tamanos-pieza figcaption { height: var(--pie); padding-top: 4px; box-sizing: border-box; text-align: center; font-family: var(--mono); font-size: 11px; line-height: 1.25; color: var(--milimetrico-tinta-2); } /* El nombre en UNA línea (Saulo, 27-sep-2026: «textos no alineados»): así los mm de todas las piezas quedan en el mismo renglón. */ .amx-v2 .amx-tamanos-pieza figcaption b { display: block; white-space: nowrap; font-weight: 700; color: var(--manila-tinta); } .amx-v2 .amx-tamanos-otros { flex: none; display: flex; flex-direction: column; gap: var(--e3); padding-left: 12px; border-left: 1px dashed var(--milimetrico-linea); } .amx-v2 .amx-tamanos-otros-tit { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--milimetrico-tinta-2); } .amx-v2 .amx-tamanos-otros-fila { display: flex; align-items: flex-end; gap: 12px; } /* «Armas que lo usan»: todas las copias del mismo ancho y alto, alineadas; el giro de siempre (-1.2°) queda dentro de los ±2° que admite Saulo (27-sep-2026). */ .amx-v2 .amx-calficha-arma { width: 200px; align-self: stretch; } .amx-v2 .amx-calficha-arma .amx-polaroid { height: 100%; box-sizing: border-box; } .amx-v2 .amx-carpeta-cab h1 { margin: 0; font-size: 27px; color: var(--manila-tinta); } @media (min-width: 1024px) { .amx-v2 .amx-carpeta-cab h1 { font-size: 40px; } } /* ── LA COPIA: clip y sello estampado ──────────────────────────────────────── */ .amx-v2 .amx-copia { position: relative; width: min(100%, 250px); margin: 6px auto 0; --giro: -1.6deg; } /* En escritorio la copia ocupa su solapa entera. Estuvo limitada por el alto de la ventana para caber en la columna fija; sin columna fija, sobra. */ @media (min-width: 1024px) { .amx-v2 .amx-copia { width: 100%; margin-top: 0; } } /* En la ficha la copia gira también en móvil: va centrada y a 290px, no a ancho completo, así que el giro ya no se come el ancho útil. */ .amx-v2 .amx-copia .amx-polaroid { transform: rotate(var(--giro)); } /* El clip. Un clip de alambre es un trazo de metal doblado en dos lazos: el exterior y, dentro, uno más corto. Dos cajas redondeadas con canto metálico, sin imagen. Pisa el canto superior de la copia. */ .amx-v2 .amx-copia-clip { position: absolute; z-index: 3; top: -20px; left: 22%; width: 19px; height: 60px; border: 2.5px solid #9CA2A6; border-radius: 10px; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .55), 1px 2px 2px rgba(23, 27, 25, .3); transform: rotate(7deg); pointer-events: none; } .amx-v2 .amx-copia-clip::before { content: ''; position: absolute; left: 2px; right: 2px; top: 13px; bottom: 2px; border: 2.5px solid #B8BDC0; border-top: 0; border-radius: 0 0 7px 7px; } /* El sello legal, estampado encima de la copia: pisa la esquina de la foto y el faldón, como un sello real que nadie alinea. Va anclado a la FOTO, no al alto de la copia. Con `bottom` en %, un faldón de dos renglones («Ceska Zbrojovka · Rep. Checa · 2013») estiraba la copia y EXCLUSIVO bajaba sobre el nombre (−11 px en la CZ P-09 a 390; −19 a 1024; 15-sep-2026). El pozo es cuadrado, así que su canto inferior queda a «ancho de la copia − 15 px», y un margin-top en % se mide contra ese mismo ancho. */ .amx-v2 .amx-copia-sello { position: absolute; z-index: 4; top: 0; right: -14px; margin-top: calc(100% - 54px); /* móvil: donde ya estaba; 9-11 px libres sobre el nombre */ pointer-events: none; } /* En escritorio el sello es de 18 px: con 60 px quedan 9-10 px libres a 1024 y 1280. */ @media (min-width: 1024px) { .amx-v2 .amx-copia-sello { right: -12px; margin-top: calc(100% - 60px); } } .amx-v2 .amx-copia-sello .amx-sello { font-size: 15px; padding: 5px 12px 6px; border-width: 3px; transform: rotate(-8deg); /* DESGASTE REBAJADO, como los avisos del tutorial: con la máscara entera se comía trazos —la L de EXCLUSIVO, medido en la primera captura— y es la categoría legal. Una capa lisa al 60 % sumada a la máscara deja ver la textura sin que desaparezca ninguna letra. */ -webkit-mask-image: url(imagenes/sello-desgaste.webp), linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)); mask-image: url(imagenes/sello-desgaste.webp), linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-composite: source-over; mask-composite: add; } @media (min-width: 1024px) { .amx-v2 .amx-copia-sello .amx-sello { font-size: 18px; padding: 6px 14px 7px; } } /* LA ÚNICA ANIMACIÓN DE ENTRADA DE LA FICHA: el sello cae sobre la copia. Solo `transform` y `opacity` (§6). Con movimiento reducido la regla global de arriba la anula y el sello aparece ya estampado. */ @keyframes amx-estampa { 0% { opacity: 0; transform: rotate(-8deg) scale(1.7); } 70% { opacity: 1; transform: rotate(-8deg) scale(.96); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } } .amx-v2 .amx-copia-sello .amx-sello--estampa { animation: amx-estampa .42s cubic-bezier(.3, .7, .2, 1) .25s both; } /* Sin fotografía (62 de 192): el sello «FOTOGRAFÍA PENDIENTE» sustituye a la leyenda. Tinta azul de sello de goma: no es una categoría legal, así que no usa ni el verde ni el rojo. */ .amx-v2 .amx-sello--pendiente { color: var(--sello-azul); font-size: 12px; transform: rotate(-9deg); } /* Aquí iban «Exclusivo — Fuerzas Armadas» y «§ Ver situación legal» bajo la copia. Salieron el 13-sep-2026: lo dicen el sello y la hoja de Legalidad. */ .amx-v2 .amx-copia-opinion { margin: var(--e3) 0 0; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--manila-tinta-2); } .amx-v2 .amx-copia-opinion b { color: var(--manila-tinta); } .amx-v2 .amx-copia-nota { margin: var(--e3) 0 0; text-align: center; font-size: 13px; font-style: italic; color: var(--manila-tinta); } /* ── EL TALÓN DE COMPROBANTE — papel autocopiante rosa ───────────────────── El borde de abajo va PICADO, como un talón arrancado de su block. El picado es una máscara, y una máscara recorta también la sombra: por eso la sombra va en el envoltorio (`drop-shadow`, que sigue el picado) y la máscara en el papel. */ .amx-v2 .amx-talon { position: relative; width: min(100%, 340px); margin: 0 auto; filter: drop-shadow(0 1px 1px rgba(23, 27, 25, .16)) drop-shadow(0 5px 8px rgba(23, 27, 25, .18)); transform: rotate(-.8deg); } .amx-v2 .amx-talon-papel { position: relative; padding: 12px 16px 16px; background: var(--talon); color: var(--talon-tinta); -webkit-mask: radial-gradient(circle at 50% 100%, transparent 3.5px, #000 4px) 0 0 / 11px 100% repeat-x; mask: radial-gradient(circle at 50% 100%, transparent 3.5px, #000 4px) 0 0 / 11px 100% repeat-x; } .amx-v2 .amx-talon-cab { display: flex; justify-content: space-between; gap: var(--e2); padding-bottom: 6px; border-bottom: 1px solid var(--talon-filo); font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--talon-rojo); } .amx-v2 .amx-talon-cifra { display: block; margin: 8px 0 4px; font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: 1.1; letter-spacing: .01em; font-variant-numeric: tabular-nums; } /* Fuente y fecha en UN renglón: el talón baja 18px y en móvil eso sube la ficha técnica al pliegue. */ .amx-v2 .amx-talon-datos { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: 2px var(--e3); margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; } .amx-v2 .amx-talon-datos dt { letter-spacing: .12em; text-transform: uppercase; color: var(--talon-tinta-2); } .amx-v2 .amx-talon-datos dd { margin: 0; } /* «ÚLTIMO PRECIO CONOCIDO»: sello rojo estampado junto a la cifra cuando el precio es de un inventario anterior al último de su sucursal (Saulo, 13-sep-2026). En un renglón y con el desgaste rebajado, como el sello de la copia: es un aviso y ninguna letra se puede perder. Rojo impreso sobre el talón: 5.19:1 (el mismo #A3341F que --talon-rojo, par auditado en contraste.mjs). */ .amx-v2 .amx-talon-sello { display: block; width: max-content; max-width: 100%; margin: 8px 0 10px auto; font-size: 13px; padding: 4px 10px 5px; border-width: 2.5px; transform: rotate(-4deg); -webkit-mask-image: url(imagenes/sello-desgaste.webp), linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)); mask-image: url(imagenes/sello-desgaste.webp), linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-composite: source-over; mask-composite: add; } /* La nota de errata DCAM (NotaErrata en ui.jsx): prosa junto a la cifra, con el signo en rojo. Fuera del talón (fichas de munición y accesorio) sigue al tema: --tinta-dim 8.24:1 / 7.03:1 y --alerta 5.63:1 / 5.26:1 sobre el papel. Dentro del talón, su tinta: 13.18:1 y el rojo impreso 5.19:1. */ .amx-v2 .amx-errata { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; margin: 6px 0 8px; font-family: var(--sans); font-size: 13.5px; line-height: 1.45; color: var(--tinta-dim); text-wrap: pretty; } .amx-v2 .amx-errata-signo { font-weight: 700; color: var(--alerta); } .amx-v2 .amx-errata-fecha { white-space: nowrap; } .amx-v2 .amx-talon .amx-errata { color: var(--talon-tinta); } .amx-v2 .amx-talon .amx-errata-signo { color: var(--talon-rojo); } /* La casilla de Comparar: se tacha a máquina. El estado lo dice la X Y el texto, no un color. */ .amx-v2 .amx-talon-casilla { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 10px; padding: 6px 0 0; background: none; border: 0; border-top: 1px dashed var(--talon-filo); font-family: var(--mono); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--talon-tinta); cursor: pointer; text-align: left; } .amx-v2 .amx-talon-caja { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid var(--talon-tinta); font-weight: 700; font-size: 15px; line-height: 1; } /* El mismo talón, fijo abajo en móvil. Aparece solo cuando el de la ficha sale de la pantalla (IntersectionObserver en ProductScreen) y sube desde abajo: es la respuesta a un gesto del visitante, no una animación de entrada. */ .amx-v2 .amx-talon--fijo { position: fixed; z-index: 55; left: 10px; right: 10px; bottom: calc(var(--amx-nav-h, env(safe-area-inset-bottom, 0px)) + 8px); width: auto; margin: 0; transform: none; animation: amx-talon-sube .22s ease-out both; } @keyframes amx-talon-sube { from { transform: translateY(130%); } to { transform: none; } } .amx-v2 .amx-talon--fijo .amx-talon-papel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); padding: 6px 14px 11px; } /* Base 0 y no auto: con flex-wrap (por la nota de errata) el ancho natural del rótulo en nowrap mandaba la casilla al renglón de abajo. */ .amx-v2 .amx-talon-resumen { flex: 1 1 0; min-width: 0; } .amx-v2 .amx-talon-mini { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--talon-rojo); } .amx-v2 .amx-talon--fijo .amx-talon-cifra { margin: 1px 0 0; font-size: 20px; white-space: nowrap; } /* A 360px la fecha partía el rótulo en dos renglones y el talón crecía: en los teléfonos más estrechos se queda la fuente, que es lo que respalda la cifra. */ .amx-v2 .amx-talon-mini { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 399px) { .amx-v2 .amx-talon-mini-fecha { display: none; } } .amx-v2 .amx-talon--fijo .amx-talon-casilla { flex: 0 0 auto; width: auto; margin: 0; padding: 0 0 0 var(--e3); border-top: 0; border-left: 1px dashed var(--talon-filo); } /* La nota de errata en la barra: renglón propio a todo el ancho, al piso de 12px para que la barra crezca lo menos posible (3 renglones a 360px). */ .amx-v2 .amx-talon--fijo .amx-errata { flex: 1 0 100%; margin: 2px 0 0; font-size: 12px; line-height: 1.35; } @media (min-width: 1024px) { .amx-v2 .amx-talon--fijo { display: none; } } /* ── Los papeles de la solapa derecha: sombra y giro comunes ────────────── `.amx-papel` es el envoltorio que lleva la sombra; el papel de dentro puede llevar máscara (perforaciones) sin perderla. Giros mínimos y estáticos. */ .amx-v2 .amx-papel { position: relative; min-width: 0; filter: drop-shadow(0 1px 1px rgba(23, 27, 25, .14)) drop-shadow(0 6px 10px rgba(23, 27, 25, .16)); transform: rotate(var(--giro-papel, 0deg)); } .amx-v2 .amx-papel-tit { margin: 0; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; } /* ── LA FICHA DE FICHERO — la ficha técnica ──────────────────────────────── Cartulina con el renglón rojo arriba, el rayado azul y la perforación abajo. Cada fila mide un renglón (30px) y el texto se apoya en su raya, que es lo que hace que se lea como una ficha mecanografiada y no como una tabla. */ .amx-v2 .amx-fichero-carton { --renglon: 30px; position: relative; padding: 0 18px 44px; background-color: var(--fichero); background-image: linear-gradient(var(--fichero-rojo), var(--fichero-rojo)), repeating-linear-gradient(180deg, transparent 0 calc(var(--renglon) - 1px), var(--fichero-azul) calc(var(--renglon) - 1px) var(--renglon)); background-size: 100% 2px, 100% 100%; background-position: 0 42px, 0 44px; background-repeat: no-repeat; border-radius: 2px; color: var(--ficha-tinta); -webkit-mask: radial-gradient(circle 8px at 50% calc(100% - 20px), transparent 96%, #000 100%); mask: radial-gradient(circle 8px at 50% calc(100% - 20px), transparent 96%, #000 100%); } .amx-v2 .amx-fichero-cab { height: 42px; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e3); padding-bottom: 7px; color: var(--ficha-tinta-2); } .amx-v2 .amx-fichero-cab span { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .amx-v2 .amx-fichero-lista { margin: 2px 0 0; } .amx-v2 .amx-fichero-fila { display: grid; grid-template-columns: auto minmax(18px, 1fr) minmax(0, max-content); align-items: end; min-height: var(--renglon); } .amx-v2 .amx-fichero-fila dt, .amx-v2 .amx-fichero-fila dd { position: relative; top: -5px; /* el texto se apoya en la raya, no flota a media altura */ line-height: calc(var(--renglon) - 6px); font-family: var(--mono); } .amx-v2 .amx-fichero-fila dt { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ficha-tinta-2); } .amx-v2 .amx-fichero-fila dd { margin: 0; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .amx-v2 .amx-fichero-guia { align-self: end; margin: 0 8px 12px; border-bottom: 2px dotted rgba(90, 81, 66, .4); } /* ── LA TARJETA DE ALMACÉN — existencias por sucursal ────────────────────── Cartulina verde con lo impreso en verde oscuro y lo escrito en tinta. */ .amx-v2 .amx-kardex-carton { padding: 12px 14px 14px; background: var(--kardex); border-radius: 2px; color: var(--manila-tinta); } .amx-v2 .amx-kardex-cab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e3); flex-wrap: wrap; padding-bottom: 8px; border-bottom: 3px double var(--kardex-imp); color: var(--kardex-imp); } .amx-v2 .amx-kardex-cab small { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .amx-v2 .amx-kardex-articulo { margin: 10px 0 12px; font-family: var(--mono); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; } .amx-v2 .amx-kardex-articulo span { margin-right: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--kardex-imp); } /* En teléfono no cabe (encabezados y AGOTADO): se desliza dentro del cartón, como el registro de precios, con la barra en la tinta impresa de la tarjeta. */ .amx-v2 .amx-kardex-desliza { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--kardex-imp) transparent; } .amx-v2 .amx-kardex-fecha { white-space: nowrap; } /* «11 sep 26» en un renglón, no en tres */ .amx-v2 .amx-kardex-tabla { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; } .amx-v2 .amx-kardex-tabla th { padding: 6px 6px 5px; text-align: left; font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--kardex-imp); border-bottom: 1.5px solid var(--kardex-imp); } .amx-v2 .amx-kardex-tabla td { padding: 4px 6px; vertical-align: middle; border-bottom: 1px solid var(--kardex-linea); } .amx-v2 .amx-kardex-tabla th + th, .amx-v2 .amx-kardex-tabla td + td { border-left: 1px solid var(--kardex-linea); } .amx-v2 .amx-kardex-tabla .num { text-align: right; } .amx-v2 .amx-kardex-suc b { display: block; font-weight: 700; letter-spacing: .08em; } /* El nombre largo de la autoridad solo cabe con ancho: en un teléfono partía «Dirección de Comercialización…» en cinco renglones y la tabla se salía de la tarjeta. La sigla basta ahí; el nombre completo sigue en el PDF. */ .amx-v2 .amx-kardex-suc small { display: none; font-size: 11px; line-height: 1.35; color: var(--kardex-tinta-2); } @media (min-width: 600px) { .amx-v2 .amx-kardex-suc small { display: block; } } .amx-v2 .amx-kardex-tabla .amx-sello { font-size: 11px; padding: 2px 6px 3px; } .amx-v2 .amx-kardex-pdf { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--kardex-imp); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .amx-v2 .amx-kardex-nota { margin: 12px 0 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--kardex-tinta-2); } .amx-v2 .amx-nivel b { font-family: var(--mono); letter-spacing: .08em; color: var(--manila-tinta); } .amx-v2 .amx-nivel span { font-family: var(--mono); letter-spacing: .08em; color: var(--kardex-linea); } /* ── EL HISTORIAL — papel milimétrico, registro y anexos grapados ────────── La cuadrícula es el papel mismo, no una textura encima: líneas finas cada 10px y marcadas cada 50px, en el azul de un block de milimétrico. */ .amx-v2 .amx-historial { container-type: inline-size; min-width: 0; } .amx-v2 .amx-milimetrico { padding: 12px 14px 14px; border-radius: 2px; color: var(--manila-tinta); background-color: var(--milimetrico); background-image: linear-gradient(rgba(143, 178, 196, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 178, 196, .5) 1px, transparent 1px), linear-gradient(rgba(143, 178, 196, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 178, 196, .2) 1px, transparent 1px); background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; background-position: -1px -1px; } .amx-v2 .amx-historial-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 4px var(--e3); flex-wrap: wrap; margin-bottom: var(--e3); color: var(--milimetrico-tinta-2); } .amx-v2 .amx-historial-cab h2 { color: var(--manila-tinta); } .amx-v2 .amx-historial-cab small { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; } .amx-v2 .amx-historial-cuerpo { display: grid; gap: var(--e4); } .amx-v2 .amx-historial-cuerpo > * { min-width: 0; } /* si no, la tabla ensancha la rejilla y no hay nada que deslizar */ .amx-v2 .amx-registro-desliza { overflow-x: auto; scrollbar-width: thin; /* la barra, con la tinta del papel y no la gris del sistema */ scrollbar-color: var(--milimetrico-tinta-2) transparent; } @container (min-width: 780px) { .amx-v2 .amx-historial-cuerpo--doble { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } } .amx-v2 .amx-registro { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; background: rgba(246, 249, 245, .82); /* se lee sobre la cuadrícula sin taparla del todo */ } .amx-v2 .amx-registro th { padding: 5px 6px; text-align: left; font-weight: 400; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--milimetrico-tinta-2); border-bottom: 1.5px solid var(--milimetrico-tinta-2); } .amx-v2 .amx-registro td { padding: 7px 6px; border-bottom: 1px solid rgba(143, 178, 196, .6); white-space: nowrap; } .amx-v2 .amx-registro .num { text-align: right; } .amx-v2 .amx-registro tr.es-actual td { font-weight: 700; } .amx-v2 .amx-baja { color: var(--sello-civil); } .amx-v2 .amx-sube { color: var(--sello-restr); } .amx-v2 .amx-historial-variacion { margin: var(--e3) 0 0; padding-top: var(--e2); border-top: 1px dashed var(--milimetrico-tinta-2); font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--milimetrico-tinta-2); } .amx-v2 .amx-historial-variacion b { margin-left: 8px; font-size: 14px; letter-spacing: .02em; } /* La fuente de cada fila abre su inventario oficial en PDF. */ .amx-v2 .amx-registro a { display: inline-block; padding: 4px 0; /* ≥ 24 px de alto: se atina con el dedo */ color: inherit; text-underline-offset: 3px; } /* El registro plegado en móvil: un
nativo, sin librería. El botón «Ver todo el registro» de escritorio se viste igual. */ .amx-v2 .amx-registro-mas { width: 100%; padding: 0; border: 0; background: none; } .amx-v2 .amx-plegable summary, .amx-v2 .amx-registro-mas { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none; font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--manila-tinta); border-top: 1px dashed var(--milimetrico-tinta-2); } .amx-v2 .amx-plegable summary::-webkit-details-marker { display: none; } .amx-v2 .amx-plegable summary::after, .amx-v2 .amx-registro-mas::after { content: '+'; font-size: 18px; line-height: 1; } .amx-v2 .amx-plegable[open] summary::after, .amx-v2 .amx-registro-mas[aria-expanded="true"]::after { content: '−'; } /* La grapa: una barrita de metal que muerde una hoja (hoy, la copia del cotejo). */ .amx-v2 .amx-grapa { position: absolute; z-index: 2; top: 5px; left: 50%; width: 28px; height: 4px; margin-left: -14px; border-radius: 2px; background: linear-gradient(180deg, #E6E9EB 0%, #A5AAAE 60%, #7F8589 100%); box-shadow: 0 1px 1px rgba(23, 27, 25, .4); pointer-events: none; } /* ── LOS SEPARADORES Y LA HOJA DE OFICIO ─────────────────────────────────── Legalidad · Usos · Antecedentes. Las pestañas son las de un separador de archivero: la de delante se une a su hoja; las de detrás van un papel más gastadas y un punto más abajo, metidas en el folder. */ .amx-v2 .amx-separadores { min-width: 0; } /* Las de detrás bajan 5px (translateY) y se salían de la tira: con overflow-x auto el navegador pone overflow-y auto, y esos 5px de más dejaban arrastrar la tira hacia arriba en iPhone (Saulo, 17-sep-2026). El padding de abajo los mete dentro de la caja y el margen negativo deja la hoja donde estaba. */ .amx-v2 .amx-separadores-pestanas { display: flex; gap: 4px; padding: 0 0 5px 10px; margin-bottom: -5px; overflow-x: auto; scrollbar-width: none; } .amx-v2 .amx-separadores-pestanas::-webkit-scrollbar { display: none; } .amx-v2 .amx-separador { position: relative; flex: 0 0 auto; min-height: 44px; padding: 12px 11px 8px; background: var(--oficio-2); border: 0; border-radius: 8px 8px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; /* las tres pestañas caben en 360px sin scroll */ text-transform: uppercase; color: var(--oficio-tinta-2); box-shadow: inset 0 -7px 7px -7px rgba(23, 27, 25, .28); transform: translateY(5px); cursor: pointer; transition: transform .16s; } @media (min-width: 600px) { .amx-v2 .amx-separador { padding: 12px 16px 8px; font-size: 12px; letter-spacing: .14em; } } .amx-v2 .amx-separador:hover { transform: translateY(2px); } .amx-v2 .amx-separador[aria-selected="true"] { z-index: 1; background: var(--oficio); color: var(--manila-tinta); box-shadow: 0 -2px 4px -2px rgba(23, 27, 25, .16); transform: none; } /* Las tres hojas (Legalidad, Usos, Antecedentes) comparten celda: la pila mide lo que la más larga y el folder no crece ni encoge al cambiar de pestaña. Las de detrás, invisibles y fuera del lector de pantalla y del tabulador. */ .amx-v2 .amx-oficio-pila { display: grid; } .amx-v2 .amx-oficio-pila > .amx-oficio { grid-area: 1 / 1; } .amx-v2 .amx-oficio-pila > [data-activo="no"] { visibility: hidden; } .amx-v2 .amx-oficio { position: relative; padding: 16px 18px 22px; background: var(--oficio); border-radius: 0 3px 3px 3px; box-shadow: 0 1px 2px rgba(23, 27, 25, .14), 0 8px 14px -6px rgba(23, 27, 25, .22); color: var(--manila-tinta); } @media (min-width: 1024px) { .amx-v2 .amx-oficio { padding: 20px 26px 26px; } } .amx-v2 .amx-oficio-membrete { display: flex; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); padding-bottom: 8px; border-bottom: 3px double var(--oficio-tinta-2); font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--oficio-tinta-2); } /* La banda del color de la clasificación, impresa de canto a canto. Dos colores, no tres (decisión del 8-sep-2026): SEGURIDAD y EXCLUSIVO comparten el rojo y los distingue la palabra, que nunca se abrevia. */ .amx-v2 .amx-oficio-banda { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px var(--e3); margin: 0 -18px var(--e4); padding: 9px 18px; color: var(--oficio); font-family: var(--sans); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; } @media (min-width: 1024px) { .amx-v2 .amx-oficio-banda { margin: 0 -26px var(--e4); padding: 10px 26px; } } .amx-v2 .amx-oficio-banda small { font-family: var(--mono); font-weight: 400; font-size: 11.5px; letter-spacing: .08em; } .amx-v2 .amx-oficio-banda--civil { background: var(--sello-civil); } .amx-v2 .amx-oficio-banda--restr { background: var(--sello-restr); } .amx-v2 .amx-oficio-tit { margin: 0 0 var(--e2); font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; } .amx-v2 .amx-oficio-texto { max-width: 68ch; margin: 0 0 var(--e4); font-family: var(--sans); font-size: 16px; line-height: 1.65; text-wrap: pretty; } .amx-v2 .amx-oficio-sub { margin: 0 0 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--oficio-tinta-2); } .amx-v2 .amx-oficio-lista { margin: 0 0 var(--e4); padding: 0; list-style: none; } .amx-v2 .amx-oficio-lista li { padding: 4px 0 4px 18px; text-indent: -18px; font-family: var(--sans); font-size: 15.5px; line-height: 1.5; } .amx-v2 .amx-oficio-lista li::before { content: '—'; display: inline-block; width: 18px; text-indent: 0; } .amx-v2 .amx-oficio-boton { min-height: 44px; padding: 0 var(--e4); background: none; border: 1.5px solid var(--manila-tinta); border-radius: 3px; font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--manila-tinta); cursor: pointer; } .amx-v2 .amx-oficio-maquina { max-width: 68ch; margin: 0; font-family: var(--mono); font-size: 14.5px; line-height: 1.8; } /* Los usos: un sello de goma chico por uso, cada uno a su ángulo. Solo los que aplican, así que no se afirma nada de los que no. */ .amx-v2 .amx-usos { display: flex; flex-wrap: wrap; gap: var(--e4) 22px; margin: 0; padding: var(--e2) 4px; list-style: none; } .amx-v2 .amx-usos .amx-sello { color: var(--sello-azul); font-size: 13px; padding: 5px 10px 6px; } .amx-v2 .amx-usos li:nth-child(3n + 1) .amx-sello { transform: rotate(-5deg); } .amx-v2 .amx-usos li:nth-child(3n + 2) .amx-sello { transform: rotate(3deg); } .amx-v2 .amx-usos li:nth-child(3n) .amx-sello { transform: rotate(-2deg); } /* ── LA CINTA DYMO — los títulos fuera del folder ────────────────────────── Cinta negra y letras en relieve, alineadas en un solo renglón (Saulo retiró el salto por letra el 16-sep-2026). */ .amx-v2 .amx-dymo { display: inline-block; max-width: 100%; margin: 0 0 var(--e4); padding: 7px 14px 6px; background: linear-gradient(180deg, #2B2C2F 0%, var(--dymo) 45%, #121315 100%); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .55), 0 2px 3px rgba(23, 27, 25, .28); font-family: var(--sans); font-weight: 700; font-size: 14px; line-height: 1.35; letter-spacing: .2em; text-transform: uppercase; color: var(--dymo-letra); text-shadow: 0 -1px 0 rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .2); transform: rotate(-.8deg); } @media (min-width: 1024px) { .amx-v2 .amx-dymo { font-size: 16px; padding: 8px 16px 7px; } } /* La cinta chica: el tramo dentro de una sección (los cargadores de la vitrina de accesorios por tipo de arma y calibre, 16-sep-2026). Misma cinta, un punto menos. */ .amx-v2 .amx-dymo--chica { margin-bottom: var(--e3); padding: 5px 10px 4px; font-size: 12px; letter-spacing: .16em; } @media (min-width: 1024px) { .amx-v2 .amx-dymo--chica { padding: 6px 12px 5px; font-size: 13px; } } /* ── LA VITRINA — munición y accesorios compatibles ──────────────────────── Un mueble de tienda con dos repisas: arriba la munición, abajo los accesorios. Las cajas se apoyan en la tabla y la etiqueta de precio va pegada con cinta canela al canto. La madera es la misma `--mesa-madera` del puesto del Home. */ /* LA PARED DEL MUEBLE (21-sep-2026). El canto de madera y el fondo de la vitrina de la ficha de arma dejan de ser suyos: los comparten los demás muebles del sitio. Una repisa sin pared detrás flota sobre el fondo de la página y se lee como un error, no como un mueble. El relleno lo pone cada uno, que no todos guardan lo mismo. */ .amx-v2 .amx-vitrina, .amx-v2 .amx-vitrina-acc-seccion, .amx-v2 .amx-anaquel { position: relative; background: linear-gradient(180deg, #E4DDCD 0%, var(--vitrina-fondo) 22%, #E9E3D6 100%); border: 10px solid var(--mesa-canto); border-bottom-width: 14px; border-radius: 6px; box-shadow: inset 0 10px 18px -12px rgba(23, 27, 25, .45), var(--sombra); color: var(--manila-tinta); } .amx-v2 .amx-vitrina { padding: 14px 12px 10px; } /* El mostrador de calibres: guarda una sola repisa que se desliza, así que el canto de abajo va pegado a ella y el de arriba deja aire para los cartuchos altos, que sobresalen por encima de la madera. */ .amx-v2 .amx-anaquel--mostrador { padding: 10px 10px 0; margin-top: 10px; } @media (min-width: 1024px) { .amx-v2 .amx-vitrina { padding: 18px 20px 14px; } } .amx-v2 .amx-repisa + .amx-repisa { margin-top: 26px; } .amx-v2 .amx-repisa-placa { display: inline-block; margin: 0 0 6px 2px; padding: 3px 10px; background: linear-gradient(180deg, #DCC68F, var(--laton) 55%, #B79E62); border-radius: 2px; box-shadow: 0 1px 1px rgba(23, 27, 25, .3); font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--manila-tinta); } /* La fila de una repisa. En móvil hace scroll de lado con imán; en escritorio las cajas se reparten en filas de seis, cada una con su tabla. */ .amx-v2 .amx-repisa-fila { --alto-foto: 112px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-left: 6px; scrollbar-width: thin; margin: 0 -12px; padding: 0 12px 6px; } .amx-v2 .amx-repisa-fila + .amx-repisa-fila { margin-top: 18px; } .amx-v2 .amx-repisa-carril { position: relative; display: flex; gap: 14px; width: max-content; min-width: 100%; margin: 0; padding: 10px 6px 0; list-style: none; } /* La tabla de la repisa, con su cubierta a la vista. 1ª versión: una tira de 24px bajo la base de las fotos — las cajas flotaban. 2ª: 40px con la base 24px dentro — seguían flotando «unas partes de la caja» (Saulo, 13-sep-2026). Medido sobre las 37 fotos de caja: están tomadas desde arriba, en tres cuartos, y la esquina TRASERA de la base queda hasta un 28 % del alto de la foto por encima de su punto más bajo (PMC 9mm: 0.28; Águila 30-06: 0.27). La cubierta tiene que llegar más atrás que esa esquina. Ahora la cubierta sube el 34 % del alto de la foto por detrás de su base, y la base queda 8px antes del canto. La madera trae la cubierta en su 80 % de arriba y el canto en el 20 % de abajo, de ahí el `/ .8`. Se descartó redibujar las fotos con un ángulo menos picado: son cajas de marca, y generarlas de nuevo arriesga deformar etiquetas y logotipos. */ .amx-v2 .amx-repisa-fila { --fondo-repisa: calc(var(--alto-foto) * .34); } .amx-v2 .amx-repisa-carril::before { content: ''; position: absolute; left: 0; right: 0; top: calc(10px + var(--alto-foto) - var(--fondo-repisa)); height: calc((var(--fondo-repisa) + 8px) / .8); background: var(--mesa-madera) 0 0 / auto 100% repeat-x; box-shadow: 0 4px 6px -3px rgba(23, 27, 25, .4); } @media (min-width: 1024px) { .amx-v2 .amx-repisa-fila { --alto-foto: 128px; overflow: visible; margin: 0; padding: 0; } .amx-v2 .amx-repisa-carril { display: grid; grid-template-columns: repeat(var(--por-fila, 6), minmax(0, 1fr)); width: auto; } } .amx-v2 .amx-articulo-celda { flex: 0 0 136px; min-width: 0; scroll-snap-align: start; } .amx-v2 .amx-articulo { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .amx-v2 .amx-articulo-foto { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; height: var(--alto-foto); transition: transform .18s; } .amx-v2 .amx-articulo:hover .amx-articulo-foto, .amx-v2 .amx-articulo:focus-visible .amx-articulo-foto { transform: translateY(-4px); } .amx-v2 .amx-articulo-foto img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 3px 2px rgba(23, 27, 25, .42)) drop-shadow(0 8px 8px rgba(23, 27, 25, .22)); } /* Accesorio sin fotografía: la silueta de su tipo, apoyada, con su sello. */ .amx-v2 .amx-articulo-vacio { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } /* Las siluetas de accesorio son largas (el cargador mide 4.5 de proporción): tumbadas quedaban en una raya gris debajo del sello. Van giradas, como las cartas de lotería, y el sello baja a la esquina. */ .amx-v2 .amx-articulo-vacio .amx-silueta-acc { width: 96%; height: 80%; background-color: var(--copia-silueta); transform: rotate(-28deg); } .amx-v2 .amx-articulo-vacio .amx-sello { position: absolute; right: 0; bottom: 10px; margin: 0; font-size: 11px; padding: 3px 6px 4px; transform: rotate(-8deg); } /* La etiqueta de precio: cartón claro pegado al canto con cinta canela. */ .amx-v2 .amx-etiqueta { position: relative; z-index: 2; display: block; /* la cinta pisa el canto: la tabla acaba 8px + su canto por debajo de la base */ margin-top: calc((var(--fondo-repisa) + 8px) / .8 - var(--fondo-repisa) - 4px); padding: 11px 9px 9px; background: var(--etiqueta); box-shadow: 0 1px 2px rgba(23, 27, 25, .24), 0 3px 6px -3px rgba(23, 27, 25, .2); transform: rotate(var(--giro-etq, -1deg)); font-family: var(--mono); font-size: 11.5px; line-height: 1.4; color: var(--manila-tinta); } .amx-v2 .amx-articulo-celda:nth-child(4n + 1) .amx-etiqueta { --giro-etq: -1.3deg; } .amx-v2 .amx-articulo-celda:nth-child(4n + 2) .amx-etiqueta { --giro-etq: .9deg; } .amx-v2 .amx-articulo-celda:nth-child(4n + 3) .amx-etiqueta { --giro-etq: -.4deg; } .amx-v2 .amx-articulo-celda:nth-child(4n) .amx-etiqueta { --giro-etq: 1.4deg; } .amx-v2 .amx-etiqueta::before { content: ''; position: absolute; top: -7px; left: 50%; width: 40px; height: 14px; margin-left: -20px; background: rgba(205, 168, 106, .62); box-shadow: 0 0 0 .5px rgba(120, 90, 40, .18); transform: rotate(-3deg); } .amx-v2 .amx-etiqueta-marca { display: flex; justify-content: space-between; gap: 6px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .amx-v2 .amx-etiqueta-marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .amx-v2 .amx-etiqueta-marca i { font-style: normal; font-weight: 400; font-size: 10.5px; letter-spacing: .06em; white-space: nowrap; } .amx-v2 .amx-etiqueta-marca .es-civil { color: var(--sello-civil); } .amx-v2 .amx-etiqueta-marca .es-restr { color: var(--sello-restr); } .amx-v2 .amx-etiqueta-nombre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 2px; color: var(--etiqueta-tinta-2); } .amx-v2 .amx-etiqueta-precio { display: block; margin-top: 5px; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; } .amx-v2 .amx-etiqueta-precio small { font-weight: 400; font-size: 11px; color: var(--etiqueta-tinta-2); } /* ── LA TELE DE LOS 80 — el video del modelo ─────────────────────────────── Mueble de madera, pantalla de tubo con sus esquinas redondas y el panel con dos perillas y la bocina. La pantalla es el