/* ══════════════════════════════════════════════════════════════════════════ FORTE UI · punto de entrada unico del sistema visual de FORTEONE ══════════════════════════════════════════════════════════════════════════ ARTEFACTO GENERADO — no editar. Se edita src/ y se ejecuta: python app/static/design/forte/build.py Orden de capas (precedencia por orden de fuente): 01 tokens fuente unica de marca y producto 02 foundations base, foco, scroll, motion, utilidades 03 materials M1-M6 y el unico backdrop-filter del producto 04 layout topbar, sticky stack, dock, pie, pagina 05 components iconos, botones, campos, tablas, tarjetas, estados 06 patterns capas, chooser, formulario largo, modulo de la home 07 responsive adaptacion de los patrones 08 accessibility foco, contraste, movimiento, objetivo tactil 09 print impresion de la INTERFAZ (los documentos: forte-doc.css) 10 legacy-bridge puente temporal, siempre bajo .fr-shell / .fr-ui Regla de gobierno: NEVER SOLVE A REUSABLE VISUAL PROBLEM LOCALLY. ══════════════════════════════════════════════════════════════════════════ */ /* ===== src/01-tokens.css ===== */ /* ════════════════════════════════════════════════════════════════════════ FORTE UI · 01 · TOKENS ════════════════════════════════════════════════════════════════════════ FUENTE ÚNICA de todo valor visual reutilizable de FORTEONE. CONTRATO DE ORIGEN · BRAND_CANONICAL — Manual corporativo (docs/VISUAL FORTE/CANONICAL/). Paleta, tintas 80/60/40 e Inter. Aquí NO se inventa nada. · PRODUCT_DERIVED — todo lo demás (superficies, materiales, sombras, radios, spacing, motion, capas). Diseño propio del producto; NUNCA se presenta como norma del manual. GAP-14 = B_HYBRID_LOCKED. REGLA DURA: ningún otro fichero del repositorio puede (re)definir un token --fr-*. Los gates de tests/test_forte_ui_brand_contract.py fallan si aparece una segunda definición. Si falta un token, se añade AQUÍ. Origen de valores: docs/VISUAL FORTE/STRUCTURAL_PREMIUM_RENEWAL_MASTER/ assets/fr.css §1 y §15.2 (owner-approved baseline). ════════════════════════════════════════════════════════════════════════ */ :root { /* ── 1.1 BRAND_CANONICAL · paleta corporativa exacta (CLAUDE.md §8.1) ── */ --fr-ink: #16080a; /* Negro Forte · Pantone Black 5 C */ --fr-cream: #f0eee9; /* Blanco Forte · Cloud Dancer C */ --fr-red: #c2402e; /* Rojo Plastic · 7619 C — acento identitario */ --fr-teal: #00303b; /* Azul Petróleo · 309 C — acento estructural */ --fr-olive: #6b9560; /* Verde Beyond · 2264 C — firma de marca */ --fr-ink-rgb: 22, 8, 10; --fr-cream-rgb: 240, 238, 233; --fr-red-rgb: 194, 64, 46; --fr-teal-rgb: 0, 48, 59; --fr-olive-rgb: 107, 149, 96; /* Tintas del manual (sólidas, hacia blanco puro). Recurso gráfico: NO son fondos de UI arbitrarios. */ --fr-red-80: #ce6658; --fr-red-60: #da8c82; --fr-red-40: #e7b2ab; --fr-teal-80: #335a62; --fr-teal-60: #668389; --fr-teal-40: #99acb0; --fr-olive-80: #89aa80; --fr-olive-60: #a6c0a0; --fr-olive-40: #c4d5c0; /* ── 1.2 PRODUCT_DERIVED · neutros cálidos (familia cream→ink) ───────── */ --fr-n50: #faf9f7; --fr-n100: #f4f0ec; --fr-n200: #e8e3de; --fr-n300: #d5cfc8; --fr-n400: #bdb5ab; --fr-n500: #8f8680; --fr-n600: #635b56; --fr-n700: #3e3631; --fr-n800: #251e1a; /* ── 1.3 Superficies (light) ────────────────────────────────────────── */ --fr-canvas: #f0eee9; /* M0 — fondo de página (Blanco Forte) */ --fr-work: #f7f6f2; /* M1 — superficie de trabajo sólida */ --fr-raised: #fbfaf8; /* M2 — panel/card elevado sólido */ --fr-top: #ffffff; /* pico puntual (campo activo, celda) */ --fr-hover: rgba(0, 48, 59, 0.045); --fr-active: rgba(0, 48, 59, 0.09); --fr-selected: #dfe7e8; /* selección persistente (tinte petróleo) */ /* ── 1.4 Texto ──────────────────────────────────────────────────────── */ --fr-text: #16080a; --fr-text-2: #453e3a; /* secundario — AA sobre glass claro */ --fr-text-3: #6f6762; /* terciario: labels, metadata */ --fr-text-4: #9a938c; /* cuaternario: placeholder, disabled */ --fr-text-inv: #f0eee9; --fr-text-inv-2: rgba(240, 238, 233, 0.74); --fr-link: #0b4450; /* ── 1.5 Bordes y hairlines ─────────────────────────────────────────── */ --fr-line-1: rgba(22, 8, 10, 0.06); /* hairline sutil */ --fr-line-2: rgba(22, 8, 10, 0.12); /* borde estándar */ --fr-line-3: rgba(22, 8, 10, 0.22); /* borde fuerte / control */ --fr-line-inv: rgba(240, 238, 233, 0.16); /* ── 1.6 MATERIALES M0–M7 ───────────────────────────────────────────── */ /* M0 canvas y M1/M2 sólidos usan las superficies de §1.3. Aquí sólo las recetas translúcidas. NINGÚN otro fichero declara backdrop-filter. */ /* M3 VEIL — glass sutil: dropdown, popover, tooltip rico */ --fr-m3-bg: rgba(247, 246, 242, 0.86); --fr-m3-blur: 14px; --fr-m3-sat: 135%; --fr-m3-solid: #f6f4f0; /* M4 PANE — glass estructural: modal, drawer, sheet */ --fr-m4-bg: linear-gradient(180deg, rgba(252, 251, 248, 0.92), rgba(245, 243, 238, 0.82)); --fr-m4-blur: 24px; --fr-m4-sat: 140%; --fr-m4-solid: #f9f8f5; /* M5 PLATE — glass oscuro: topbar, action dock, toolbar flotante */ --fr-m5-bg: rgba(16, 7, 9, 0.82); --fr-m5-blur: 18px; --fr-m5-sat: 130%; --fr-m5-solid: rgba(16, 7, 9, 0.97); /* M6 SHEET-TECH — casi sólido: confirmación destructiva, modal técnico */ --fr-m6-bg: rgba(253, 252, 250, 0.96); --fr-m6-blur: 10px; --fr-m6-sat: 120%; --fr-m6-solid: #fdfcfa; /* M7 THIN — lámina fina: el plano de contenido de la tarjeta de módulo. Es el ÚNICO translúcido de la Home (HOME V2 · R6B EQUILIBRADA) y lo que desenfoca es el plano de identidad que tiene JUSTO ENCIMA —el color de su propia tarjeta—, no un fondo lejano. Un desenfoque por tarjeta; ni uno más. 10 px, no 18: a 18 lo de detrás es niebla y deja de ser espesor. saturate 1,14, no 1,7: por encima de 1,3 el material TIÑE, y teñir es efecto, no transmisión. Todo desenfoque necesita algo de `saturate` o el vidrio se come el color de lo que hay debajo. */ --fr-m7-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0.04)), rgba(255, 255, 255, 0.66); --fr-m7-blur: 10px; --fr-m7-sat: 114%; --fr-m7-solid: rgba(255, 255, 255, 0.94); /* Velo de capa (backdrop). Único valor autorizado. */ /* El velo RETIRA la pagina, no la borra. A 0,38 la Home de debajo se leia como una mancha y la capa parecia una ventana sobre nada; a 0,32 el contexto sigue reconociendose —volver no desorienta— y el panel sigue destacando: 2,32 de contraste contra el fondo velado, frente a 2,73. Es el criterio que R6B dejo escrito para su propia capa. */ --fr-veil-bg: rgba(17, 8, 10, 0.32); --fr-veil-blur: 5px; --fr-veil-sat: 85%; --fr-veil-solid: rgba(17, 8, 10, 0.55); /* ── 1.7 Edge system: 3 recursos, no más ────────────────────────────── */ --fr-edge-out: 0 0 0 1px rgba(22, 8, 10, 0.10); /* marco */ --fr-edge-in: inset 0 1px 0 rgba(255, 255, 255, 0.55); /* luz superior */ --fr-edge-rim: inset 0 0 0 0.5px rgba(255, 255, 255, 0.30); /* rim interior */ --fr-edge-out-dark: 0 0 0 1px rgba(240, 238, 233, 0.12); --fr-edge-in-dark: inset 0 1px 0 rgba(240, 238, 233, 0.10); /* ── 1.8 Shadow system: cada sombra con función ─────────────────────── */ --fr-sh-contact: 0 1px 2px rgba(22, 8, 10, 0.10); /* apoyo */ --fr-sh-card: 0 1px 2px rgba(22, 8, 10, 0.08), 0 8px 20px -8px rgba(22, 8, 10, 0.14); --fr-sh-float: 0 1px 3px rgba(22, 8, 10, 0.10), 0 18px 44px -16px rgba(22, 8, 10, 0.24); --fr-sh-menu: 0 2px 6px rgba(22, 8, 10, 0.08), 0 12px 32px -12px rgba(22, 8, 10, 0.26); --fr-sh-modal: 0 2px 4px rgba(22, 8, 10, 0.08), 0 32px 72px -24px rgba(22, 8, 10, 0.34); --fr-sh-press: 0 0.5px 1px rgba(22, 8, 10, 0.12); /* pressed */ /* ── 1.9 Radius system: escalera 4/8/12/16 ──────────────────────────── */ --fr-r-ctl: 4px; /* botones, inputs, chips, celdas editables */ --fr-r-card: 8px; /* cards, paneles, toolbar */ --fr-r-float: 12px; /* menú, popover, drawer, dock */ --fr-r-modal: 16px; /* modal, sheet */ /* ── 1.10 Spacing: base 4px, denso primero ──────────────────────────── */ --fr-s1: 2px; --fr-s2: 4px; --fr-s3: 6px; --fr-s4: 8px; --fr-s5: 12px; --fr-s6: 16px; --fr-s7: 20px; --fr-s8: 24px; --fr-s9: 32px; --fr-s10: 40px; --fr-s11: 48px; /* ── 1.11 Tipografía · Inter, 4 pesos autorizados ───────────────────── */ /* "ForteInter" es el asset variable ya servido por el runtime desde app/static/fonts/inter/ (declarado en css/forte-fonts.css). El sistema NO vuelve a declarar @font-face: reutiliza el que ya existe. */ --fr-font: "ForteInter", "Inter", "Helvetica Neue", -apple-system, system-ui, sans-serif; /* Identificadores técnicos —nombre de tabla, de columna, tipo SQL, código de artículo—. No es una segunda tipografía de marca: es la forma de decir «esto es un literal y se lee carácter a carácter». La pila la repetían a mano seis plantillas y cinco hojas de módulo; la decisión tipográfica vive donde tiene que vivir. */ --fr-font-mono: "SF Mono", "Fira Code", "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace; --fr-fw-light: 300; --fr-fw-reg: 400; --fr-fw-med: 500; --fr-fw-bold: 700; --fr-t-micro: 0.6875rem; /* 11 — metadata, kicker */ --fr-t-mini: 0.75rem; /* 12 — labels, unidades, celdas densas */ --fr-t-small: 0.8125rem; /* 13 — cuerpo denso, tabla estándar */ --fr-t-base: 0.875rem; /* 14 — cuerpo UI */ --fr-t-lead: 1rem; /* 16 — cuerpo destacado, input táctil */ /* Los tres cuerpos grandes son FLUIDOS y los cinco pequenos no. Un cuerpo de 13 px es legibilidad, y escalarlo con la ventana solo consigue que la misma tabla se lea distinta en dos monitores. Un titulo de pagina si es composicion: a 375 px pide 20 y a 1.920 pide 24. El techo del `clamp` es lo que impide que en 4K se conviertan en un cartel. */ --fr-t-h3: clamp(1rem, 0.18vw + 0.955rem, 1.125rem); /* 16 → 18 */ --fr-t-h2: clamp(1.25rem, 0.28vw + 1.18rem, 1.375rem); /* 20 → 22 */ --fr-t-h1: clamp(1.5rem, 0.55vw + 1.36rem, 1.875rem); /* 24 → 30 */ --fr-lh-dense: 1.35; --fr-lh-body: 1.5; --fr-ls-wide: 0.08em; /* ── 1.12 Estados funcionales ───────────────────────────────────────── */ /* GAP-14 B_HYBRID_LOCKED: derivados accesibles, NO colores corporativos. El error NUNCA es Rojo Plastic; el rojo de marca es acento identitario. */ --fr-ok: #2e6b3e; --fr-ok-soft: rgba(46, 107, 62, 0.12); --fr-warn: #8a5800; --fr-warn-soft: rgba(138, 88, 0, 0.12); --fr-danger: #9e2b1f; --fr-danger-soft: rgba(158, 43, 31, 0.12); --fr-info: #155a68; --fr-info-soft: rgba(21, 90, 104, 0.11); /* ── 1.13 Focus: anillo doble, visible en cream / ink / glass ───────── */ --fr-focus: 0 0 0 2px var(--fr-cream), 0 0 0 4px var(--fr-teal); --fr-focus-inset: inset 0 0 0 2px var(--fr-teal); --fr-focus-ring: rgba(0, 48, 59, 0.16); /* halo de control enfocado */ /* ── 1.14 Motion: 3 duraciones, 1 curva, sin rebote ─────────────────── */ --fr-ease: cubic-bezier(0.2, 0, 0, 1); --fr-d-micro: 120ms; /* hover, pressed, toggle */ --fr-d-state: 200ms; /* selección, expandir, tab */ --fr-d-overlay: 260ms; /* modal, drawer, sheet */ --fr-d-topbar: 160ms; /* cruce de capas de la topbar */ /* ── 1.15 CONTRATO DE CAPAS · escala única y pequeña ────────────────── */ /* Un solo lugar decide alturas. Ningún módulo escribe z-index literal. El apilado real lo garantiza .fr-layer con isolation:isolate: entre familias sólo compite este número. */ --fr-z-base: 0; --fr-z-thead: 10; --fr-z-toolbar: 30; --fr-z-dock: 40; --fr-z-fab: 60; /* El pie identitario es shell, no dock de página: cuando está fijo vive en el plano de la barra, no en el zócalo de acciones de una pantalla. Los dos valores son los que el shell YA tenía en producción, y su orden importa: el menú de usuario cuelga de la barra, y si ambas capas empatasen el pie lo taparía por ser posterior en el DOM. Entre 1000 y 1030 no hay ninguna otra capa del producto; por debajo del pie están la banda y la línea de 95 dvh de `indicadores_proceso` (998 y 999), que hoy quedan bajo él y deben seguir quedando. */ --fr-z-footer: 1000; --fr-z-topbar: 1030; --fr-z-dropdown: 1100; --fr-z-menu: 1100; /* alias de dropdown */ --fr-z-drawer: 1200; --fr-z-sheet: 1300; --fr-z-modal: 1400; --fr-z-chooser: 1500; /* se abre DESDE un modal: siempre por encima */ --fr-z-critical: 1600; --fr-z-toast: 1700; --fr-z-tooltip: 1800; /* ── 1.15b SAFE AREA · los insets del dispositivo, con nombre ──────── El recorte del telefono —hora, cobertura, bateria, Dynamic Island, notch, barra de gestos— no es un numero que se pueda escribir. `env()` lo sirve y hasta ahora se consumia A MANO en 44 sitios del producto: no habia forma de auditarlo, de simularlo en un arnes ni de saber quien lo respetaba. Con nombre, si. El respaldo `0px` va DENTRO de `env()`, no fuera: en un navegador de escritorio el inset no existe y sin respaldo la declaracion entera seria invalida, no cero. REGLA DE CONSUMO — `max()`, NUNCA suma. `padding: calc(16px + safe)` da 16 px de mas cuando el inset vale 0, que es el caso de TODAS las pantallas de escritorio. `padding: max(16px, safe)` da 16 cuando no hay recorte y el recorte cuando lo hay. Sumar solo es correcto donde el relleno base es estructural y el inset ADEMAS tiene que caber: la barra fija, por ejemplo, donde la fila de controles necesita su propio alto ENTERO por debajo del notch. Cada uso declara cual de las dos cosas es. */ --fr-safe-top: env(safe-area-inset-top, 0px); --fr-safe-right: env(safe-area-inset-right, 0px); --fr-safe-bottom: env(safe-area-inset-bottom, 0px); --fr-safe-left: env(safe-area-inset-left, 0px); /* ── 1.16 STICKY STACK · offsets derivados, nunca literales ─────────── */ /* STICKY_STACK_SPEC.md. Prohibido `top: 83px` en CSS de módulo: toda barra pegajosa deriva su posición de estas variables. */ /* RESERVA del shell: lo que el body compensa y de lo que cuelga el stack. */ --fr-topbar-h: 44px; /* SUMA, no `max()`: la fila de controles necesita su alto entero POR DEBAJO del recorte. Es el caso estructural de §1.15b. */ --fr-topbar-offset: calc(var(--fr-topbar-h) + var(--fr-safe-top)); /* CAJA PINTADA de la barra: padding + alto útil de su fila de controles. No coincide con la reserva —hoy son 38,2 px dentro de 44— y esa holgura de 5,8 px es la que el producto lleva desde R1.3. Se conserva tal cual: alinearlas es una decisión visual, no un efecto colateral de migrar. */ --fr-topbar-pad: 0.1rem; --fr-topbar-box: 34px; /* Objetivo táctil de los controles del shell: 32 px con ratón, 44 con dedo. Una sola definición para el botón de tema, el menú de usuario y el lockup (SHELL-UX-01 · S1). */ --fr-topbar-target: 32px; --fr-toolbar-h: 0px; --fr-sticky-top: calc(var(--fr-topbar-offset) + var(--fr-toolbar-h)); --fr-dock-h: 0px; /* Alto del pie GLOBAL cuando está fijo. En táctil y en tablet pasa a flujo (OD-2 · A) y esta reserva se libera. */ --fr-footer-h: 28px; --fr-menu-maxh: calc(100vh - var(--fr-topbar-offset) - 16px); --fr-menu-maxh: calc(100dvh - var(--fr-topbar-offset) - var(--fr-safe-bottom) - 16px); --fr-scrollbar-w: 6px; /* Alto de la cabecera de tabla, MEDIDO: 7 + 7 de relleno, la caja del rótulo y el filete inferior dan 31 px en la densidad estándar y 27 en la densa. Existe como token porque el `scroll-padding` del scroller de tabla necesita descontarlo (04-layout §4.3) y ahí no hay forma de preguntarlo. 34 deja el margen óptico de la fila que llega debajo. */ --fr-thead-h: 34px; /* ── 1.17 Layout · REGIMENES, LIENZO Y RITMO ──────────────────────── Los seis regimenes del sistema. NO son dispositivos: son los anchos donde el CONTENIDO cambia de forma. Una @media no puede leer una variable, asi que estos numeros se escriben a mano en 07-responsive.css; viven aqui para que haya UN sitio donde consultarlos y para que nadie invente un septimo corte por su cuenta. COMPACT <= 599 una columna, la tarjeta es el ancho MOBILE 600– 767 una columna con aire TABLET 768–1023 dos columnas, gutter claramente mayor TABLET_L 1024–1279 tres columnas DESKTOP 1280–1599 cuatro columnas WIDE 1600–1919 cuatro, el lienzo empieza a sobrar ULTRAWIDE >=1920 la composicion se CENTRA y deja de crecer LIENZO. El ancho util no crece indefinidamente: a partir de `--fr-content-max` la composicion se centra y el resto es margen. Medido antes de esta fase: a 3.840 px las familias con `--wide` servian tarjetas de 3.720 px de ancho. Eso no es una tarjeta, es una pancarta. GUTTER. `clamp(20px, 6vw, 56px)`. El suelo de 20 es lo que un telefono necesita para que el texto no roce el borde; el 6vw hace que un iPad reciba 46–49 y no los 26 que daba el `4vw` anterior —la queja de «escritorio comprimido» empezaba ahi—; el techo de 56 evita que un monitor ancho se coma el lienzo por los lados. */ --fr-content-max: 1720px; --fr-page-gutter: clamp(20px, 6vw, 56px); /* ISLA EN 4K. El techo de 1.720 arregló la pancarta —a 3.840 px una tarjeta medía 3.720— pero se pasó de frenada por el otro lado: en un monitor de 3.840 dejaba 2.120 px de margen y la aplicación entera parecía una isla en mitad del escritorio. «Deja de crecer» no es «se queda del tamaño de un portátil»: el techo SUBE por escalones con la pantalla, y sigue teniendo tope. Los escalones están al final de este bloque. */ /* Una pagina `--wide` es MAS ancha que la estandar, no infinita. */ --fr-wide-max: 2280px; /* Nombres anteriores. Siguen vivos, apuntando a la geometria nueva y no a una copia: los consumen `.fr-page` (max-width) y la navegacion de formulario en 07-responsive, que sangra y compensa con el gutter. Tres reglas en total; ninguna hoja de modulo los usa. */ --fr-page-max: var(--fr-content-max); --fr-page-pad: var(--fr-page-gutter); --fr-touch-min: 44px; /* objetivo táctil mínimo, no negociable */ /* RITMO RESPONSIVE. La escala `--fr-s*` es FIJA y se queda fija: sus pasos pequenos (2, 4, 6, 8) son detalle optico y una tabla industrial densa depende de que no se muevan. Lo que si tiene que respirar es el ritmo de COMPOSICION, y para eso hay tokens propios. Un modulo que quiera aire consume estos; no redefine la escala. */ --fr-gap-grid: clamp(14px, 1.9vw + 5px, 26px); /* entre tarjetas */ --fr-gap-stack: clamp(16px, 1.5vw + 8px, 28px); /* entre bloques */ --fr-gap-section: clamp(22px, 2.4vw + 10px, 44px); /* entre secciones */ --fr-pad-card: clamp(16px, 1.1vw + 10px, 26px); /* dentro de tarjeta */ --fr-pad-modal: clamp(16px, 1.4vw + 9px, 30px); /* dentro de capa */ --fr-gap-form: clamp(14px, 1.2vw + 8px, 22px); /* entre campos */ /* Banda del pie que `.fr-page--app` reserva SIEMPRE. No deriva de --fr-footer-h a propósito: ese token vale 0 cuando el pie vuelve al flujo, y ahí la banda sigue haciendo falta porque la ocupa el pie al final del documento. Es la altura con la que los CRUD están medidos desde F-J-01; derivarla del pie fijo les cambiaría el alto en táctil. */ --fr-page-foot: 28px; /* ── 1.17b RITMO DEL CROMO SUPERIOR ────────────────────────────────── El envoltorio del shell es `main.container-fluid py-3` (base.html), o sea 1 rem arriba y otro abajo escritos por Bootstrap. En un monitor eso es el ritmo correcto; en un iPhone 15 vertical son 32 px de los 852 que hay, y en apaisado 32 de 393. Se nombra aquí por dos razones. La primera es que `.fr-page--app` DESCUENTA ese relleno de su altura calculada, y tenerlo escrito a mano en dos sitios significa que el día que uno cambie el otro se queda con una altura falsa y aparece un scroll exterior. La segunda es que sin nombre no se puede compactar por régimen sin repetir el número. */ --fr-shell-pad-block: 1rem; } /* MÓVIL Y MÓVIL APAISADO. El cromo se compacta; el CONTENIDO no (§27 del encargo: compactar cromo antes que contenido). 8 px arriba y abajo siguen separando la primera pieza de la barra sin que parezca pegada. */ @media (max-width: 700px), (max-height: 500px) { :root { --fr-shell-pad-block: 0.5rem; } } /* ── 1.17c COMPACT HEIGHT · el régimen de POCA ALTURA ──────────────────── FORTE_IOS_IPADOS_HARDENING_02B. El sistema tenía siete regímenes y los siete se deciden por ANCHO. Pero la altura también es un recurso, y en algunos sitios es EL recurso: un iPhone apaisado da 393 px, y con la barra táctil, un título, una franja de mando y un selector de nivel el contenido empezaba en el píxel 309 de esos 393. Hasta ahora eso se corregía con `@media (max-height: 500px)` sueltos —cinco en el sistema y tres más en la hoja del Registro de Inyección—, cada uno con su número y ninguno con nombre. Aquí el régimen se declara UNA vez y lo que cambia son TOKENS, así que cualquier pieza que consuma el ritmo de composición se compacta sola sin escribir una excepción propia. NO ES UN CORTE DE DISPOSITIVO. 500 px de alto es la altura por debajo de la cual una composición vertical deja de caber, y le pasa a un teléfono apaisado, a una tableta con el teclado abierto y a una ventana de escritorio baja. Es el mismo umbral que el contrato responsive ya declara (§8.6, «≤ 500px de alto · móvil apaisado»): se le pone nombre, no se inventa uno nuevo. Sólo baja el AIRE ENTRE BLOQUES. Ni el objetivo táctil, ni el cuerpo de texto, ni el relleno de una tarjeta que contiene datos: eso es contenido, y §3 del encargo lo deja fuera. */ @media (max-height: 500px) { :root { --fr-compact-height: 1; /* testigo legible para el arnés y los gates */ --fr-gap-stack: 12px; /* entre bloques · desde clamp(16…28) */ --fr-gap-section: 16px; /* entre secciones · desde clamp(22…44) */ } } /* El dedo pide más barra y más zócalo que el ratón. 2 + 44 + 2 de padding y 1,5 de borde ≈ 49,5 px: se reservan 50. Todo lo que deriva de la altura —la compensación del body y la altura calculada de los CRUD— se recalcula solo; no hay ninguna altura de barra escrita a mano. */ @media (pointer: coarse) { :root { --fr-topbar-h: 50px; --fr-topbar-box: 44px; --fr-topbar-pad: 2px; --fr-topbar-target: var(--fr-touch-min); } } /* El pie suelta el zócalo en cuanto la pantalla es estrecha o se toca con el dedo: ahí abajo va el action dock (OD-2 · A). Mismo umbral que usa el componente en 04-layout.css §4.4. */ @media (max-width: 991.98px), (pointer: coarse) { :root { --fr-footer-h: 0px; } } /* ── 1.18 Acentos de módulo · COLOR GOVERNANCE (OD-3 · A) ────────────── El campo `tarjeta.color` de BD se conserva intacto (05A no escribe en base de datos). La PRESENTACIÓN se normaliza: el adaptador de app/services/forte_color_governance.py resuelve cualquier valor de BD a una de estas familias curadas. Un HEX desconocido cae en `neutral`. Ver docs/VISUAL FORTE/PRODUCTION_UI_SYSTEM/COLOR_GOVERNANCE_CONTRACT.md */ :root { --fr-acc-teal-ink: #00303b; --fr-acc-teal-soft: rgba(0, 48, 59, 0.08); --fr-acc-red-ink: #9e2b1f; --fr-acc-red-soft: rgba(158, 43, 31, 0.10); --fr-acc-olive-ink: #3f6437; --fr-acc-olive-soft: rgba(107, 149, 96, 0.14); --fr-acc-ink-ink: #16080a; --fr-acc-ink-soft: rgba(22, 8, 10, 0.06); --fr-acc-slate-ink: #3e3631; --fr-acc-slate-soft: rgba(62, 54, 49, 0.09); --fr-acc-neutral-ink: #635b56; --fr-acc-neutral-soft: rgba(99, 91, 86, 0.08); } /* ── 1.20 Familias de módulo · identidad cromática de la Home (HOME V2) ─ PRODUCT_DERIVED. NO son colores de marca y no se presentan como tales: GAP-14 = B_HYBRID_LOCKED rige aquí igual que para `--fr-danger`. ORIGEN. La escala clara es la de R6B · V2 EQUILIBRADA, la variante que el propietario aprobó para implantar. No se reinterpreta ni un valor: son los de `HOME_R6B_REFINEMENT/assets/r6b-paleta.css` (P16 SERENA), diseñados en CIE LCh con recorte de gamut por bisección sobre el CROMA —nunca por canal, que mueve el tono y es lo que hace que una paleta «se vaya a rosa»—. TRES PAPELES, no una rampa. Cada rol tiene un sitio y una superficie: plane plano de identidad, PLANO L 84–91 · C 8–25 · ~57 % de la tarjeta edge-rgb filete inferior de familia 1 px al 34 % accent placa · filete de la cifra · fondo del CTA al 10 % graphite tinta del CTA ink tinta del título plate-ink glifo de la placa — se elige por CONTRASTE, no se supone POR QUÉ NO BASTA `--fr-acc-*`. El gobierno de color (OD-3 · A) resuelve cualquier HEX de BD a seis familias curadas, y ahí `#008cd7` (Personal) y `#4db6ac` (Equipos) caen los DOS en `teal`. Para el acento de un control eso es correcto y no se toca; para la identidad de dos módulos contiguos significa que no se distinguen. Esta escala resuelve otro problema —identificar el módulo— y por eso CONVIVE con la otra, no la sustituye. RECALIBRACION (RESPONSIVE_GLOBAL_01). CONTROL OPERATIVO deja de ser ocre / arena / mostaza por decision del propietario y pasa a AMARILLO VERDOSO — lima tecnico —. El ocre vivia en h 93; el jade de Equipos en h 182. El lima se situa en h 111: inequivocamente amarillo-verdoso, a 71 grados del jade y a 18 del ocre que sustituye. Croma MEDIO (30 en el plano, 28 servido): un lima de croma 60 es un rotulador. dE2000 frente al ocre 8,0 —se nota—, frente al jade 17,7 —no se confunden—. Y no se movio sola. Medir las cinco juntas, que es lo que el encargo exige, destapo que el par mas debil de la matriz NO era Control con nadie: era PERSONAL con DESARROLLO, dE2000 8,7, los dos azules y sin mas diferencia que el croma. Personal baja a L 83,5 y sube a croma 21; Desarrollo baja a croma 3,7 y se enfria a h 254 para leerse como GRIS con sesgo. El peor par pasa a 13,0 en claro y de 6,5 a 9,7 en oscuro. ACABADO (V2E). La cabecera deja de ser un `background-color` opaco: se sirve al 94 % sobre el lienzo, y para eso hace falta el RGB de cada plano. Es lo que separa un vidrio tintado de un rectángulo pastel. Y el ESCÁNER se mueve catorce grados de tono —de h 22 a h 36— bajando tres puntos de croma: de rosa a terracota clara. Seguía siendo el plano más «de caramelo» de los cinco, y su franja ocupa todo el ancho. El techo del desplazamiento lo pone `control`, que ya es arena: a h 36 la separación con él es de dE2000 17,4, de sobra. AFINADO EN PANTALLA REAL (V2D). Los planos bajan entre un 12 y un 28 % de croma conservando tono y claridad. Dos motivos, los dos visibles sólo al verlo a tamaño real y no en la maqueta de 1.180 px: · el plano del ESCÁNER era el más saturado de los cinco y por tanto lo primero que el ojo iba a buscar — justo lo contrario de lo que V2 decidió. A todo el ancho de la banda, pesaba. Baja de croma 21,0 a 15,4, que es la corrección mayor; · sobre 1.584 px de fila el color ocupa mucha más superficie que sobre la maqueta, y tres puntos de croma de más se notan. Comprobado que no rompe nada: la separación entre familias sigue en dE2000 9,06 en el peor par y los contrastes siguen sobre AA. MEDIDO sobre las superficies reales del sistema, no estimado: título/plano ≥ 8,09:1 · placa/acento ≥ 4,38:1 · CTA/fondo ≥ 5,54:1 dE2000 entre familias ≥ 9,84 (claro) · ≥ 6,54 (oscuro) */ :root { --fr-mod-scan-plane: #f5d6d1; --fr-mod-scan-plane-rgb: 245, 214, 209; --fr-mod-scan-edge-rgb: 236, 156, 144; --fr-mod-scan-accent: #ba6552; --fr-mod-scan-accent-rgb: 186, 101, 82; --fr-mod-scan-graphite: #77493f; --fr-mod-scan-ink: #43302d; --fr-mod-scan-plate-ink: var(--fr-ink); --fr-mod-personal-plane: #a6d7f3; --fr-mod-personal-plane-rgb: 166, 215, 243; --fr-mod-personal-edge-rgb: 0, 173, 226; --fr-mod-personal-accent: #0081a8; --fr-mod-personal-accent-rgb: 0, 129, 168; --fr-mod-personal-graphite: #065c79; --fr-mod-personal-ink: #253741; --fr-mod-personal-plate-ink: var(--fr-ink); --fr-mod-equipos-plane: #b8e3db; --fr-mod-equipos-plane-rgb: 184, 227, 219; --fr-mod-equipos-edge-rgb: 81, 185, 169; --fr-mod-equipos-accent: #008c7e; --fr-mod-equipos-accent-rgb: 0, 140, 126; --fr-mod-equipos-graphite: #1e5e56; --fr-mod-equipos-ink: #263835; --fr-mod-equipos-plate-ink: var(--fr-ink); --fr-mod-control-plane: #dfe4aa; --fr-mod-control-plane-rgb: 223, 228, 170; --fr-mod-control-edge-rgb: 184, 194, 106; --fr-mod-control-accent: #7f8a27; --fr-mod-control-accent-rgb: 127, 138, 39; --fr-mod-control-graphite: #60652a; --fr-mod-control-ink: #3c3b29; --fr-mod-control-plate-ink: var(--fr-ink); --fr-mod-dev-plane: #e1e7ed; --fr-mod-dev-plane-rgb: 225, 231, 237; --fr-mod-dev-edge-rgb: 164, 181, 196; --fr-mod-dev-accent: #4e7188; --fr-mod-dev-accent-rgb: 78, 113, 136; --fr-mod-dev-graphite: #465763; --fr-mod-dev-ink: #30353a; --fr-mod-dev-plate-ink: var(--fr-cream); /* Alias por defecto. Una tarjeta cuya familia no esté declarada NO puede quedarse en CADENA VACÍA: en R6B ese fallo dejó las placas sin fondo y el glifo invisible, y no lo denunció ni el navegador ni ningún gate. */ /* TRANSMISION del plano de identidad sobre el lienzo. NO es una constante: el mismo tinte no pesa lo mismo a 260 px que ocupando el ancho entero de un telefono, donde la cabecera deja de ser una tarjeta y pasa a ser una banda. 07-responsive.css la baja en el regimen compacto. Medido en los dos extremos: 0 fallos de contraste en ambos. */ --fr-mod-tint: 0.94; --fr-mod-plane: var(--fr-n100); --fr-mod-plane-rgb: 244, 240, 236; --fr-mod-edge-rgb: var(--fr-ink-rgb); --fr-mod-accent: var(--fr-acc-neutral-ink); --fr-mod-accent-rgb: 99, 91, 86; --fr-mod-graphite: var(--fr-acc-neutral-ink); --fr-mod-ink: var(--fr-text); --fr-mod-plate-ink: var(--fr-cream); } /* ══════════════════════════════════════════════════════════════════════ 1.18b · LIENZO EN PANTALLAS MUY GRANDES (ver ISLA EN 4K) ══════════════════════════════════════════════════════════════════════ Sólo cambian los DOS techos del lienzo. Ni el gutter, ni el ritmo, ni la escala de espaciado: una tabla industrial densa depende de que no se muevan. Medido en la Home: 2.560 px pasa del 67% al 80% de ancho útil y 3.840 px del 45% al 63%. */ @media (min-width: 2200px) { :root { --fr-content-max: 2040px; --fr-wide-max: 2600px; } } @media (min-width: 3000px) { :root { --fr-content-max: 2400px; --fr-wide-max: 3000px; } } /* ══════════════════════════════════════════════════════════════════════ 1.19 · TEMA OSCURO (OD-4 · A — entra en la foundation) ══════════════════════════════════════════════════════════════════════ PRODUCT_DERIVED: el manual corporativo no define modo oscuro. Se enganchan los DOS contratos: `data-fr-theme` (propio del sistema) y `data-theme` (el que el runtime de FORTEONE ya escribe en ), para que el toggle existente siga gobernando sin JavaScript adicional. */ [data-fr-theme="dark"], [data-theme="dark"] { --fr-canvas: #120709; --fr-work: #1a0e10; --fr-raised: #221316; --fr-top: #2a1a1d; --fr-hover: rgba(240, 238, 233, 0.05); --fr-active: rgba(240, 238, 233, 0.09); --fr-selected: #1e2f33; --fr-text: rgba(240, 238, 233, 0.94); --fr-text-2: rgba(240, 238, 233, 0.72); --fr-text-3: rgba(240, 238, 233, 0.50); --fr-text-4: rgba(240, 238, 233, 0.30); --fr-link: #8ec4d0; --fr-line-1: rgba(240, 238, 233, 0.06); --fr-line-2: rgba(240, 238, 233, 0.12); --fr-line-3: rgba(240, 238, 233, 0.24); --fr-m3-bg: rgba(26, 13, 15, 0.86); --fr-m3-solid: #211114; --fr-m4-bg: linear-gradient(180deg, rgba(34, 19, 22, 0.92), rgba(24, 12, 14, 0.84)); --fr-m4-solid: #201013; --fr-m6-bg: rgba(30, 16, 19, 0.96); --fr-m6-solid: #241317; --fr-m7-bg: linear-gradient(180deg, rgba(240, 238, 233, 0.07), rgba(240, 238, 233, 0.025) 34%, rgba(240, 238, 233, 0.012)), rgba(18, 9, 11, 0.58); --fr-m7-solid: #1d1013; --fr-edge-out: var(--fr-edge-out-dark); --fr-edge-in: var(--fr-edge-in-dark); --fr-edge-rim: inset 0 0 0 0.5px rgba(240, 238, 233, 0.10); --fr-sh-contact: 0 1px 2px rgba(0, 0, 0, 0.40); --fr-sh-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.45); --fr-sh-float: 0 1px 3px rgba(0, 0, 0, 0.40), 0 18px 44px -16px rgba(0, 0, 0, 0.55); --fr-sh-menu: 0 2px 6px rgba(0, 0, 0, 0.35), 0 12px 32px -12px rgba(0, 0, 0, 0.55); --fr-sh-modal: 0 2px 4px rgba(0, 0, 0, 0.40), 0 32px 72px -24px rgba(0, 0, 0, 0.65); --fr-ok: #9cc4a4; --fr-warn: #d9b36a; --fr-danger: #d99a91; --fr-info: #8ec4d0; --fr-focus: 0 0 0 2px var(--fr-ink), 0 0 0 4px #8ec4d0; --fr-focus-ring: rgba(142, 196, 208, 0.22); --fr-acc-teal-ink: #8ec4d0; --fr-acc-teal-soft: rgba(142, 196, 208, 0.12); --fr-acc-red-ink: #d99a91; --fr-acc-red-soft: rgba(217, 154, 145, 0.12); --fr-acc-olive-ink: #a6c0a0; --fr-acc-olive-soft: rgba(166, 192, 160, 0.12); --fr-acc-ink-ink: #e8e3de; --fr-acc-ink-soft: rgba(240, 238, 233, 0.07); --fr-acc-slate-ink: #bdb5ab; --fr-acc-slate-soft: rgba(189, 181, 171, 0.10); --fr-acc-neutral-ink: #8f8680; --fr-acc-neutral-soft: rgba(143, 134, 128, 0.10); /* Familias de módulo (§1.20) en oscuro. R6B NO resolvió dark; esto se deriva con el mismo instrumento —CIE LCh, recorte por croma— conservando el TONO y la PROPORCIÓN de croma entre familias, y cambiando sólo la claridad: plano L 22 · filete L 58 · acento L 72 · grafito L 80. LA PRIMERA DERIVACIÓN SE TUVO QUE TIRAR. Con croma FIJO para las cinco, Personal (h 243,5) y Desarrollo (h 250,6) medían dE2000 1,85: son casi el mismo azul y en claro sólo los separa el croma —21,0 contra 8,0—. Igualarlo borra la única diferencia que tenían. Escalado, el peor par queda en 6,54. */ --fr-mod-scan-plane: #482e2d; --fr-mod-scan-plane-rgb: 72, 46, 45; --fr-mod-scan-edge-rgb: 204, 113, 113; --fr-mod-scan-accent: #fa9493; --fr-mod-scan-accent-rgb: 250, 148, 147; --fr-mod-scan-graphite: #f5b7b5; --fr-mod-scan-ink: var(--fr-text); --fr-mod-scan-plate-ink: var(--fr-ink); --fr-mod-personal-plane: #153949; --fr-mod-personal-plane-rgb: 21, 57, 73; --fr-mod-personal-edge-rgb: 0, 150, 197; --fr-mod-personal-accent: #6abae0; --fr-mod-personal-accent-rgb: 106, 186, 224; --fr-mod-personal-graphite: #a5cce2; --fr-mod-personal-ink: var(--fr-text); --fr-mod-personal-plate-ink: var(--fr-ink); --fr-mod-equipos-plane: #203935; --fr-mod-equipos-plane-rgb: 32, 57, 53; --fr-mod-equipos-edge-rgb: 37, 156, 142; --fr-mod-equipos-accent: #5dc1b2; --fr-mod-equipos-accent-rgb: 93, 193, 178; --fr-mod-equipos-graphite: #9ed0c7; --fr-mod-equipos-ink: var(--fr-text); --fr-mod-equipos-plate-ink: var(--fr-ink); --fr-mod-control-plane: #343620; --fr-mod-control-plane-rgb: 52, 54, 32; --fr-mod-control-edge-rgb: 135, 146, 61; --fr-mod-control-accent: #acb858; --fr-mod-control-accent-rgb: 172, 184, 88; --fr-mod-control-graphite: #c6ca95; --fr-mod-control-ink: var(--fr-text); --fr-mod-control-plate-ink: var(--fr-ink); --fr-mod-dev-plane: #313539; --fr-mod-dev-plane-rgb: 49, 53, 57; --fr-mod-dev-edge-rgb: 123, 142, 158; --fr-mod-dev-accent: #95b5cb; --fr-mod-dev-accent-rgb: 149, 181, 203; --fr-mod-dev-graphite: #b8c9d6; --fr-mod-dev-ink: var(--fr-text); --fr-mod-dev-plate-ink: var(--fr-ink); --fr-mod-plane: var(--fr-raised); --fr-mod-plane-rgb: 34, 19, 22; --fr-mod-edge-rgb: 240, 238, 233; --fr-mod-accent: var(--fr-acc-neutral-ink); --fr-mod-accent-rgb: 143, 134, 128; --fr-mod-graphite: var(--fr-acc-neutral-ink); --fr-mod-ink: var(--fr-text); --fr-mod-plate-ink: var(--fr-ink); } /* ===== src/02-foundations.css ===== */ /* ════════════════════════════════════════════════════════════════════════ FORTE UI · 02 · FOUNDATIONS ════════════════════════════════════════════════════════════════════════ Base tipográfica, foco, scroll, selección y utilidades mínimas. ÁMBITO: todo lo de este fichero cuelga de `.fr-app`. Ninguna regla toca `html`, `body` ni selectores de elemento desnudos: cargar el sistema en una pantalla no migrada NO puede cambiar su aspecto. Esa es la condición que permite servir forte-ui.css globalmente sin big-bang (§33). ════════════════════════════════════════════════════════════════════════ */ .fr-app { font-family: var(--fr-font); font-size: var(--fr-t-base); line-height: var(--fr-lh-body); color: var(--fr-text); background: var(--fr-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .fr-app *, .fr-app *::before, .fr-app *::after { box-sizing: border-box; } /* ── Enlaces ──────────────────────────────────────────────────────────── OJO CON LA ESPECIFICIDAD (defecto real, corregido en 05B · ola 1): `.fr-app a` vale (0,2,0) y `.fr-btn--primary` vale (0,1,0). Sin la exclusión de abajo, CUALQUIER enlace con aspecto de componente —un ``, que es como se escribe media navegación del producto— perdía el color de texto de su intención y heredaba el del enlace: crema sobre tinta pasaba a petróleo sobre tinta, es decir, ilegible. Medido en la migración de F06 y F08. Un enlace que ES un componente no es un enlace de texto: su color y su subrayado los decide el componente. La lista es cerrada y corta a propósito; si aparece un componente nuevo que pueda ser ``, se añade aquí y no se parchea en el módulo. */ .fr-app a:not(.fr-btn):not(.fr-iconbtn):not(.fr-picker):not(.fr-module):not(.fr-modulerow):not(.fr-menu-item):not(.fr-chip):not(.fr-tab):not(.fr-chooser-opt):not(.fr-modcard-link) { color: var(--fr-link); text-decoration: none; } .fr-app a:not(.fr-btn):not(.fr-iconbtn):not(.fr-picker):not(.fr-module):not(.fr-modulerow):not(.fr-menu-item):not(.fr-chip):not(.fr-tab):not(.fr-chooser-opt):not(.fr-modcard-link):hover { text-decoration: underline; text-underline-offset: 2px; } .fr-app a.fr-btn, .fr-app a.fr-iconbtn, .fr-app a.fr-picker, .fr-app a.fr-menu-item, .fr-app a.fr-chip, .fr-app a.fr-tab, .fr-app a.fr-chooser-opt, .fr-app a.fr-modcard-link { text-decoration: none; } .fr-app ::selection { background: rgba(0, 48, 59, 0.18); } /* ── `hidden` gana a cualquier componente ─────────────────────────────── `[hidden]{display:none}` es una regla del NAVEGADOR, y cualquier componente que declare su propio `display` la derrota: un `.fr-empty` (flex), un `.fr-btn` (inline-flex) o una `.fr-row` marcados como `hidden` seguían viéndose. El sistema ya lo resolvía para `.fr-layer`; aquí se generaliza, con ámbito y sin `!important`. Ocultar algo es estado, no aspecto: si el marcado dice `hidden`, no se pinta. */ .fr-app [hidden], body.fr-ui [hidden] { display: none; } /* ── Foco · una sola definición para todo el producto ─────────────────── El anillo doble se ve sobre cream, sobre ink y sobre vidrio. Ningún componente define su propio foco: si necesita otro, extiende éste. */ .fr-app :focus-visible { outline: none; box-shadow: var(--fr-focus); border-radius: var(--fr-r-ctl); } /* ── Números técnicos: SIEMPRE tabulares ──────────────────────────────── Una cifra de proceso que baila al actualizarse no es legible en planta. */ .fr-num, .fr-table td.fr-td-num, .fr-kpi-value, .fr-unit-input input { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; } /* ── Scroll local · barra fina visible ────────────────────────────────── Primitiva de scroll. Ver docs PRODUCTION_UI_SYSTEM/RESPONSIVE.md para cuándo usar page scroll, local scroll o scroll de capa. */ .fr-scroll { scrollbar-width: thin; scrollbar-color: rgba(22, 8, 10, 0.22) transparent; } .fr-scroll::-webkit-scrollbar { width: var(--fr-scrollbar-w); height: var(--fr-scrollbar-w); } .fr-scroll::-webkit-scrollbar-thumb { background: rgba(22, 8, 10, 0.18); border-radius: 3px; } .fr-scroll::-webkit-scrollbar-thumb:hover { background: rgba(22, 8, 10, 0.30); } [data-fr-theme="dark"] .fr-scroll, [data-theme="dark"] .fr-scroll { scrollbar-color: rgba(240, 238, 233, 0.22) transparent; } [data-fr-theme="dark"] .fr-scroll::-webkit-scrollbar-thumb, [data-theme="dark"] .fr-scroll::-webkit-scrollbar-thumb { background: rgba(240, 238, 233, 0.18); } /* Scroll contenido: el gesto no se propaga al documento de detrás. */ .fr-scroll--contain { overscroll-behavior: contain; } /* ── Motion · sólo las cuatro entradas autorizadas ────────────────────── Sin rebote, sin spring, sin filtros animados. */ .fr-enter-overlay { animation: fr-overlay-in var(--fr-d-overlay) var(--fr-ease); } @keyframes fr-overlay-in { from { opacity: 0; transform: translateY(8px) scale(0.995); } to { opacity: 1; transform: none; } } .fr-enter-menu { animation: fr-menu-in var(--fr-d-micro) var(--fr-ease); } @keyframes fr-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .fr-enter-sheet { animation: fr-sheet-in var(--fr-d-overlay) var(--fr-ease); } @keyframes fr-sheet-in { from { transform: translateY(24px); opacity: 0.4; } to { transform: none; opacity: 1; } } @keyframes fr-spin { to { transform: rotate(360deg); } } /* ── Tipografía de apoyo ──────────────────────────────────────────────── La Línea Beyond (BRAND_CANONICAL) sólo se construye acompañando tipografía: grosor derivado del asta de la I mayúscula de Inter, borde inferior en la línea base. Cualquier otra línea del producto usa los filetes PRODUCT_DERIVED de abajo y JAMÁS se llama «Beyond». */ .fr-beyond-lockup { display: flex; align-items: baseline; gap: 0.44em; } .fr-beyond-lockup .word { font-weight: var(--fr-fw-bold); letter-spacing: 0.02em; line-height: 1; } .fr-beyond-lockup .line { flex: 0 0 auto; align-self: baseline; height: 0.0925em; transform: translateY(-0.005em); background: currentColor; border: 0; } .fr-divider { height: 1px; background: var(--fr-line-2); border: 0; margin: var(--fr-s6) 0; } .fr-hairline { height: 1px; background: var(--fr-line-1); border: 0; } .fr-rule-strong{ height: 1px; background: var(--fr-line-3); border: 0; } /* ── Utilidades mínimas ───────────────────────────────────────────────── Deliberadamente pocas: el sistema no es una librería de utilidades. Cada una existe porque sustituye a un `style=""` que aparecía repetido en el marcado, no porque «pueda hacer falta». */ .fr-row { display: flex; align-items: center; gap: var(--fr-s4); flex-wrap: wrap; } .fr-stack { display: flex; flex-direction: column; gap: var(--fr-s4); } .fr-grow { flex: 1 1 auto; min-width: 0; } .fr-muted { color: var(--fr-text-3); } .fr-small { font-size: var(--fr-t-mini); } .fr-right { text-align: right; } .fr-mono-num { font-variant-numeric: tabular-nums; } /* `color: inherit` no es decorativo: Bootstrap pinta `code` de rosa con un selector de ELEMENTO, y `.fr-mono` ganaba la tipografía pero no el color, así que un `` salía rosa dentro de un párrafo apagado. Un identificador técnico no elige su color: lo hereda. */ .fr-mono { font-family: var(--fr-font-mono); font-size: 0.94em; color: inherit; } /* Color semántico sobre TEXTO — una cifra de diagnóstico, el valor de una celda, el resultado de una comprobación. Existen porque sustituyen a cuarenta `style="color: …"` escritos a mano en las pantallas de administración de datos, cada uno con su propio HEX. Nunca son colores corporativos: son los derivados funcionales (GAP-14 = B_HYBRID_LOCKED). */ .fr-ok-text { color: var(--fr-ok); } .fr-warn-text { color: var(--fr-warn); } .fr-danger-text { color: var(--fr-danger); } .fr-info-text { color: var(--fr-info); } .fr-pad { padding: var(--fr-s5); } .fr-pad-tight { padding: var(--fr-s4); } .fr-rounded { border-radius: var(--fr-r-card); } .fr-mb { margin-bottom: var(--fr-s5); } .fr-tight { margin: 0; } .fr-on-dark { color: var(--fr-text-inv-2); } .fr-sr, .fr-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .fr-kbd { display: inline-block; min-width: 18px; padding: 1px 5px; text-align: center; border: 1px solid var(--fr-line-2); border-bottom-width: 2px; border-radius: 3px; background: var(--fr-n50); font-size: 0.625rem; font-weight: var(--fr-fw-med); color: var(--fr-text-3); font-family: var(--fr-font); } /* ===== src/03-materials.css ===== */ /* ════════════════════════════════════════════════════════════════════════ FORTE UI · 03 · MATERIALES ════════════════════════════════════════════════════════════════════════ REGLA ABSOLUTA DEL SISTEMA (§12 del encargo 05A): `backdrop-filter` NO puede declararse fuera de este fichero. Toda translucidez del producto —modal, drawer, sheet, menú, topbar, velo— compone su material aquí. Un módulo que necesite vidrio aplica una clase `.fr-m3…m6`; no escribe su propia receta. El gate tests/test_forte_ui_material_contract.py falla si aparece una nueva. Excepciones vivas y auditadas: la topbar (04-layout.css) es la única pieza que compone DOS capas con brightness previo, porque su problema —tinta corporativa sobre lienzo claro— no se resuelve con un material genérico; está documentada en su sitio y cuenta como material del sistema, no como isla. ESCALERA M0 canvas fondo de página → var(--fr-canvas) M1 work superficie de trabajo → .fr-m1 (sólido) M2 raised panel / card elevado → .fr-m2 (sólido) M3 veil dropdown, popover, tooltip → .fr-m3 (glass sutil) M4 pane modal, drawer, sheet → .fr-m4 (glass estructural) M5 plate topbar, dock, toolbar → .fr-m5 (glass oscuro) M6 sheet-tech confirmación destructiva → .fr-m6 (casi sólido) M7 thin lámina fina de tarjeta → .fr-m7 (glass fino) WORK = SOLID · FLOATING = SELECTIVE PREMIUM LIQUID GLASS · PRINT = SOLID (CLAUDE.md §8.3) ════════════════════════════════════════════════════════════════════════ */ .fr-m1 { background: var(--fr-work); box-shadow: var(--fr-edge-out); } .fr-m2 { background: var(--fr-raised); border-radius: var(--fr-r-card); box-shadow: var(--fr-edge-out), var(--fr-sh-card); } .fr-m3 { background: var(--fr-m3-bg); -webkit-backdrop-filter: blur(var(--fr-m3-blur)) saturate(var(--fr-m3-sat)); backdrop-filter: blur(var(--fr-m3-blur)) saturate(var(--fr-m3-sat)); border-radius: var(--fr-r-float); box-shadow: var(--fr-edge-out), var(--fr-edge-in), var(--fr-sh-menu); } .fr-m4 { background: var(--fr-m4-bg); -webkit-backdrop-filter: blur(var(--fr-m4-blur)) saturate(var(--fr-m4-sat)); backdrop-filter: blur(var(--fr-m4-blur)) saturate(var(--fr-m4-sat)); border-radius: var(--fr-r-modal); box-shadow: var(--fr-edge-out), var(--fr-edge-in), var(--fr-edge-rim), var(--fr-sh-modal); } .fr-m5 { background: var(--fr-m5-bg); -webkit-backdrop-filter: blur(var(--fr-m5-blur)) saturate(var(--fr-m5-sat)); backdrop-filter: blur(var(--fr-m5-blur)) saturate(var(--fr-m5-sat)); color: var(--fr-text-inv); box-shadow: var(--fr-edge-in-dark), 0 2px 12px rgba(0, 0, 0, 0.25); } /* M7 THIN — la lámina fina de la tarjeta de módulo (HOME V2). ES DISTINTO DE M3, y la diferencia no es el número de píxeles de desenfoque: M3 flota SOBRE la página y transmite un fondo lejano; M7 es una capa INTERIOR de una pieza y transmite el plano de identidad que tiene justo encima —el color de su propia tarjeta—. Por eso lleva la mitad de desenfoque, casi nada de saturación y su borde superior es un ESCALÓN DE VALOR de dos píxeles (una línea de tinta al 8 % y una de luz al 70 % justo debajo) en vez de una sombra: a 1:1 se lee como un canto real y a media escala desaparece. Eso es la microprofundidad, y cuesta dos declaraciones. No lleva radio ni sombra propios: los pone la pieza que lo consume. */ /* El desenfoque NO sube. Lo que mejora es el CANTO: la frontera entre el plano de identidad y el de contenido pasa de dos líneas a tres —un pelo del acento de la familia, la línea de tinta y la luz—, de modo que el escalón tiene color propio en vez de ser un corte neutro. Sigue midiendo dos píxeles y sigue desapareciendo a media escala. */ .fr-m7 { background: var(--fr-m7-bg); -webkit-backdrop-filter: blur(var(--fr-m7-blur)) saturate(var(--fr-m7-sat)); backdrop-filter: blur(var(--fr-m7-blur)) saturate(var(--fr-m7-sat)); box-shadow: inset 0 1px 0 rgba(var(--fr-mod-accent-rgb, var(--fr-ink-rgb)), 0.10), inset 0 2px 0 -1px rgba(var(--fr-ink-rgb), 0.07), inset 0 3px 0 -1px rgba(255, 255, 255, 0.72); } .fr-m6 { background: var(--fr-m6-bg); -webkit-backdrop-filter: blur(var(--fr-m6-blur)) saturate(var(--fr-m6-sat)); backdrop-filter: blur(var(--fr-m6-blur)) saturate(var(--fr-m6-sat)); border-radius: var(--fr-r-modal); box-shadow: var(--fr-edge-out), var(--fr-edge-in), var(--fr-sh-modal); } /* ── Velo de capa ─────────────────────────────────────────────────────── Único backdrop del producto. Vive SIEMPRE dentro de un `.fr-layer` (ver 06-patterns.css): su altura la da el contexto de apilado de la capa, nunca un z-index propio. */ .fr-veil { position: absolute; inset: 0; z-index: 0; background: var(--fr-veil-bg); -webkit-backdrop-filter: blur(var(--fr-veil-blur)) saturate(var(--fr-veil-sat)); backdrop-filter: blur(var(--fr-veil-blur)) saturate(var(--fr-veil-sat)); } /* ── Fallback duro sin backdrop-filter ────────────────────────────────── La jerarquía se mantiene con sólidos de la misma familia. Nunca «caja gris»: el producto sigue siendo legible en un navegador sin soporte. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .fr-m3 { background: var(--fr-m3-solid); } .fr-m4 { background: var(--fr-m4-solid); } .fr-m5 { background: var(--fr-m5-solid); } .fr-m6 { background: var(--fr-m6-solid); } .fr-m7 { background: var(--fr-m7-solid); } .fr-veil { background: var(--fr-veil-solid); } } /* ── REDUCED_EFFECTS ──────────────────────────────────────────────────── `.fr-nobf` fuerza el fallback en QA. `[data-fr-effects="reduced"]` es el modo de rendimiento del producto: equipos de planta antiguos donde el desenfoque cuesta scroll. La jerarquía no cambia, sólo el coste. */ .fr-nobf .fr-m3, [data-fr-effects="reduced"] .fr-m3 { background: var(--fr-m3-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } .fr-nobf .fr-m4, [data-fr-effects="reduced"] .fr-m4 { background: var(--fr-m4-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } .fr-nobf .fr-m5, [data-fr-effects="reduced"] .fr-m5 { background: var(--fr-m5-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } .fr-nobf .fr-m6, [data-fr-effects="reduced"] .fr-m6 { background: var(--fr-m6-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } .fr-nobf .fr-m7, [data-fr-effects="reduced"] .fr-m7 { background: var(--fr-m7-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } .fr-nobf .fr-veil, [data-fr-effects="reduced"] .fr-veil { background: var(--fr-veil-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } [data-fr-effects="reduced"] .fr-m2 { box-shadow: var(--fr-edge-out), var(--fr-sh-contact); } /* ===== src/04-layout.css ===== */ /* ════════════════════════════════════════════════════════════════════════ FORTE UI · 04 · LAYOUT ════════════════════════════════════════════════════════════════════════ Shell (topbar · toolbar · dock · footer), contenedores de página y las primitivas de sticky. Aquí vive la ÚNICA topbar del producto y los ÚNICOS offsets pegajosos: ningún módulo escribe `top: 83px`. ════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ 4.1 · TOPBAR ══════════════════════════════════════════════════════════════════════ MATERIAL DE NEGRO FORTE, NO LAVADO GRIS. Diagnóstico del defecto que corrige (aritmética, no opinión): una barra `rgba(16,7,9,.72)` sobre lienzo Blanco Forte compone 0,72·(22,8,10) + 0,28·(240,238,233) = (83,74,73) → #534A49 es decir, un GRIS. Ningún desenfoque devuelve ese color a la familia de la tinta. Corrección: apagar el fondo ANTES de componer. `backdrop-filter` admite `brightness()`, así que lo que atraviesa la barra entra ya oscurecido y saturado; el compuesto se queda en familia ink incluso con alfas bajas y el fondo SIGUE LEYÉNDOSE, tintado. T2 · 0,82·(22,8,10) + 0,18·(132,131,128) = (42,30,31) → #2A1E1F Materialidad, no opacidad: la barra es una PLACA — degradado vertical corto cuya media es exactamente la tinta corporativa. Sin glow, sin lechosidad, sin sombra grande. Estados: reposo y desplazamiento son DOS capas que se cruzan por opacidad. El desenfoque no se interpola nunca: la capa desplazada nace con el filtro puesto pero a opacidad 0, luego es invisible en t=0. DOSIS ACTIVA: T2 (OD-R3-2, decidida por el propietario). t1/t3 se conservan como atributo para QA y para una eventual revisión, no como sistema paralelo. ── FIJADO, NO PEGADO (05B · ola 1B) ────────────────────────────────── `position: sticky` falla en Safari iOS cuando el elemento es hijo directo de un `body { display:flex; flex-direction:column }` sin altura explícita: ese contenedor no crea un scroll container estable. `fixed` ancla la barra al viewport siempre, y el body compensa con `--fr-topbar-offset`. */ .fr-topbar { --tb-rest: 0.975; /* alfa de la capa en reposo */ --tb-a: 0.84; /* alfa de la capa desplazada — T2 */ --tb-blur: 20px; --tb-sat: 165%; --tb-dim: 0.52; /* cuánto se apaga el fondo ANTES de componer */ position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: var(--fr-z-topbar); /* La altura la fija la fila de controles, no una constante: ver --fr-topbar-box en 01-tokens.css §1.16. Sin padding lateral — el 2 % de margen lo aportan el slot de marca y el bloque de acciones, que se posicionan contra la barra. */ padding-block: var(--fr-topbar-pad); padding-inline: 0; display: flex; align-items: stretch; background: transparent; isolation: isolate; border-bottom: 1px solid rgba(var(--fr-red-rgb), 0.34); box-shadow: inset 0 1px 0 rgba(var(--fr-cream-rgb), 0.085), /* luz de arista superior */ inset 0 -1px 0 rgba(var(--fr-cream-rgb), 0.045), /* canto óptico inferior */ 0 1px 0 rgba(var(--fr-ink-rgb), 0.10); transition: box-shadow var(--fr-d-topbar) var(--fr-ease), border-color var(--fr-d-topbar) var(--fr-ease); } /* iOS con viewport-fit=cover no descuenta la barra de estado: la Dynamic Island se comería la fila de controles. El notch se suma UNA vez, aquí; el body compensa esa misma cantidad con --fr-topbar-offset. */ /* Sin `@supports`: el token de §1.15b ya lleva el respaldo `0px` dentro de `env()`, asi que en un navegador sin recorte la declaracion vale `calc(pad + 0px)` y no hay doble relleno. La envoltura solo servia para protegerse de una sintaxis que hoy entiende todo el parque. */ .fr-topbar { padding-top: calc(var(--fr-topbar-pad) + var(--fr-safe-top)); } /* La fila de controles: es quien da altura a la barra y quien crea el contexto contra el que se posicionan el lockup y las acciones. */ .fr-topbar-inner { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; min-height: var(--fr-topbar-box); } /* La reserva del espacio que la barra fija deja de ocupar en el flujo. La emite `body.fr-shell`, que Jinja escribe para todo usuario autenticado: determinista, sin depender del soporte de `:has()` en el navegador. La página de acceso no la lleva y no reserva nada. */ body.fr-shell { padding-top: var(--fr-topbar-offset); } /* El relleno vertical del envoltorio del shell pasa a salir del token (§1.17b) en vez de quedarse en el `py-3` de Bootstrap. En escritorio vale exactamente lo mismo —1 rem— y no cambia nada; en móvil se compacta a la mitad, y `.fr-page--app` sigue descontando la cifra correcta porque descuenta el mismo token, no un número copiado. */ body.fr-shell > main { padding-top: var(--fr-shell-pad-block); padding-bottom: var(--fr-shell-pad-block); } /* Las tres dosis varían UNA cosa: cuánta tinta hay delante. Con --tb-dim constante, el fondo que atraviesa es exactamente 1 − alfa, y la progresión es real: 8 % → 16 % → 26 %. */ .fr-topbar[data-fr-tb="t1"] { --tb-a: 0.92; --tb-blur: 14px; --tb-sat: 145%; } .fr-topbar[data-fr-tb="t2"] { --tb-a: 0.84; --tb-blur: 20px; --tb-sat: 165%; } .fr-topbar[data-fr-tb="t3"] { --tb-a: 0.74; --tb-blur: 28px; --tb-sat: 190%; } /* Las dos capas de material. La media del degradado es Negro Forte exacto. */ .fr-topbar::before, .fr-topbar::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: opacity var(--fr-d-topbar) var(--fr-ease); } .fr-topbar::before { /* REPOSO — tinta, sin filtro */ background: linear-gradient(180deg, rgba(30, 15, 18, var(--tb-rest)) 0%, rgba(22, 8, 10, var(--tb-rest)) 58%, rgba(13, 5, 7, var(--tb-rest)) 100%); opacity: 1; } .fr-topbar::after { /* DESPLAZADA — vidrio tintado */ background: linear-gradient(180deg, rgba(30, 15, 18, var(--tb-a)) 0%, rgba(22, 8, 10, var(--tb-a)) 58%, rgba(13, 5, 7, var(--tb-a)) 100%); opacity: 0; } .fr-topbar[data-fr-topbar="scrolled"]::before { opacity: 0; } .fr-topbar[data-fr-topbar="scrolled"]::after { opacity: 1; -webkit-backdrop-filter: blur(var(--tb-blur)) saturate(var(--tb-sat)) brightness(var(--tb-dim)); backdrop-filter: blur(var(--tb-blur)) saturate(var(--tb-sat)) brightness(var(--tb-dim)); } .fr-topbar[data-fr-topbar="scrolled"] { border-bottom-color: rgba(var(--fr-red-rgb), 0.28); box-shadow: inset 0 1px 0 rgba(var(--fr-cream-rgb), 0.10), inset 0 -1px 0 rgba(var(--fr-cream-rgb), 0.06), 0 1px 0 rgba(var(--fr-ink-rgb), 0.08), 0 8px 18px -16px rgba(var(--fr-ink-rgb), 0.45); /* caída corta, no sombra */ } /* Con una capa modal abierta la barra vuelve a sólida: dos desenfoques superpuestos ensucian el lockup y no aportan profundidad. */ .fr-topbar[data-fr-topbar="over-layer"]::before { opacity: 1; } .fr-topbar[data-fr-topbar="over-layer"]::after { opacity: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } /* El contenido vive por encima de las dos capas. */ .fr-topbar > * { position: relative; z-index: 1; } /* ── ANATOMÍA · HEADER-BRAND-01 + SHELL-UX-01 ────────────────────────── Las dos mitades se posicionan CONTRA la fila, no se reparten con flex: así el menú de usuario puede fijarse al viewport en móvil sin quedar anclado a un bloque derecho estrecho, y ninguna de las dos altera la altura de la barra al crecer. El lockup conserva la relación 8000:1071 del PNG corporativo: a 320 px ocupa 142×19, y progresa hasta 210×28 en escritorio. Nunca crea una altura de barra distinta de la que fija --fr-topbar-box. */ .fr-topbar-brand-slot { position: absolute; left: max(2%, var(--fr-safe-left)); top: 50%; z-index: var(--fr-z-topbar); width: calc(50% - 8px); transform: translateY(-50%); } .fr-topbar-brand { display: flex; align-items: center; /* `max-content` ciñe el área pulsable al logotipo: con `width: 100%` el enlace se estiraba hasta el borde de su slot aunque el dibujo fuese más estrecho, y a 430 px llegaba a tocar el botón de tema. */ width: max-content; max-width: min(210px, 100%); min-height: var(--fr-topbar-target); margin: 0; padding: 0; line-height: 1; } .fr-topbar-brand-img { display: block; width: clamp(142px, 42vw, 210px); max-width: 100%; height: auto; object-fit: contain; object-position: left center; } /* El bloque derecho se alinea SIN transform: un `translateY` crearía un bloque de contención y devolvería el menú `position: fixed` al ancho del bloque, que es justo lo que se quiere evitar en móvil. */ .fr-topbar-actions { position: absolute; top: 0; bottom: 0; right: max(2%, var(--fr-safe-right)); z-index: var(--fr-z-topbar); display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(50% - 8px); } .fr-topbar-nav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; } .fr-topbar-nav > li { min-width: 0; } .fr-topbar-btn, .fr-topbar-user-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: var(--fr-topbar-target); min-height: var(--fr-topbar-target); border: 0; cursor: pointer; background: transparent; transition: background var(--fr-d-micro) var(--fr-ease), color var(--fr-d-micro) var(--fr-ease); } /* El radio va acotado a la barra a propósito: `a:focus-visible` de css/lg-tokens.css (0,1,1) impone 4 px a cualquier ancla enfocada, y un selector de una sola clase perdería contra él justo al recibir el foco. */ .fr-topbar .fr-topbar-btn, .fr-topbar .fr-topbar-user-btn { border-radius: 8px; } .fr-topbar-btn { gap: 6px; padding: 0 var(--fr-s4); color: var(--fr-text-inv-2); font: inherit; font-size: var(--fr-t-small); font-weight: var(--fr-fw-med); } .fr-topbar-btn:hover { background: rgba(240, 238, 233, 0.10); color: var(--fr-cream); } .fr-topbar-btn:active { background: rgba(240, 238, 233, 0.16); } /* El glifo del control de tema se dibuja con una fuente de iconos hasta que la migración iconográfica lo sustituya por el símbolo del sprite. */ .fr-topbar-btn .bi { font-size: 1.1rem; line-height: 1; } /* El control de usuario. El padding vertical de un `nav-link` es lo que le hacía sobresalir 2,2 px por encima del borde de la barra: su zona alta quedaba fuera del área pulsable real. La altura la da min-height. No declara tipografía: hereda la del documento, que es con la que el nombre está medido. El color y el peso los fija el apagado de css/user_levels.css en css/lg-forte-tokens.css §20. */ .fr-topbar-user-btn { min-width: 0; padding: 0 8px; white-space: nowrap; text-decoration: none; } .fr-topbar-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .fr-topbar-user-btn::after, .fr-topbar-user-btn > .bi { flex-shrink: 0; } .fr-topbar-user-btn > .bi { margin-right: 4px; } /* Anillo de foco del shell: Rojo Plastic sobre la placa de tinta. El anillo general del sistema es teal y sobre este fondo pierde contraste. No se toca `box-shadow`: el halo que cada pantalla ya aporta se conserva. EL `!important` NO ES NUEVO: es el mismo que el shell llevaba desde R1-4 en css/lg-forte-tokens.css, y viaja aquí con el resto del componente. Lo necesita porque NUEVE hojas de módulo —index-dashboard, lg-atbd, lg-cebd, lg-despiece, lg-efbd, lg-extrusionsoplado, lg-funciones-soporte, lg-garrasbd y lg-maqbd-inventario— declaran un `*:focus-visible` con `!important` que alcanza al shell entero, y contra un `!important` ninguna especificidad gana. RETIRADA: cuando esas hojas acoten su foco a su propia pantalla al migrar. Hasta entonces, quitarlo aquí no arregla nada: sólo hace que el anillo de la barra cambie de color según en qué pantalla estés. */ .fr-topbar :focus-visible { outline: 2px solid var(--fr-red) !important; outline-offset: 2px; } @media (max-width: 575.98px) { /* El nombre completo llegaba a consumir 181 px de una barra de 393. Se oculta A LA VISTA, no al lector de pantalla: el control conserva su nombre accesible, el enlace su `title`, y el nombre sigue impreso en la cabecera del propio menú. Ninguna acción deja de estar disponible. */ .fr-topbar-user-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Sin texto a la derecha, la separación del icono sobra. */ .fr-topbar-user-btn > .bi { margin-right: 0; } } /* SEGURIDAD ÓPTICA DE LA MARCA (PRODUCT_DERIVED). El asset oficial no se toca y NO se le pone caja: la legibilidad sobre un fondo que deja pasar contenido se resuelve con una sombra de 1 px que sigue el canal alfa del propio logotipo. Sin recuadro, sin halo, sin alterar su zona de protección. */ .fr-topbar-brand-img { transition: filter var(--fr-d-topbar) var(--fr-ease); } .fr-topbar[data-fr-topbar="scrolled"] .fr-topbar-brand-img { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.55)); } .fr-topbar[data-fr-tb="t3"][data-fr-topbar="scrolled"] .fr-topbar-brand-img { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.68)); } /* Sin backdrop-filter la barra NO se aligera: la legibilidad manda sobre el efecto y el fallback nunca puede quedar en gris. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .fr-topbar[data-fr-topbar="scrolled"]::after { --tb-a: 0.975; } } .fr-nobf .fr-topbar[data-fr-topbar="scrolled"]::after, [data-fr-effects="reduced"] .fr-topbar[data-fr-topbar="scrolled"]::after { --tb-a: 0.975; -webkit-backdrop-filter: none; backdrop-filter: none; } /* El objetivo táctil de 44 px lo aporta --fr-topbar-target, que ya cambia con `pointer: coarse` en 01-tokens.css: los controles y el lockup no necesitan repetir el umbral. */ @media (max-width: 576px) { /* El pulgar tapa la barra y el fondo cambia con cada gesto: media dosis. La marca tiene que quedarse quieta aunque debajo pase de todo. */ .fr-topbar, .fr-topbar[data-fr-tb="t2"] { --tb-a: 0.90; } .fr-topbar[data-fr-tb="t1"] { --tb-a: 0.95; } .fr-topbar[data-fr-tb="t3"] { --tb-a: 0.84; } } /* ══════════════════════════════════════════════════════════════════════ 4.2 · PÁGINA ══════════════════════════════════════════════════════════════════════ */ /* GUTTER Y SAFE AREA. El aire lateral sale de `--fr-page-gutter` (§1.17) y el recorte del dispositivo entra por `max()`, NUNCA sumado: en un monitor el inset vale 0 y sumarlo daria el doble de margen del decidido. En un telefono apaisado el inset lateral vale 59 px y ahi manda el. Por abajo, el recorte se SUMA a la reserva: la barra de gestos del telefono se come esa banda y el contenido tiene que terminar por encima. */ .fr-page { padding-top: calc(var(--fr-topbar-offset) + var(--fr-gap-stack)); padding-left: max(var(--fr-page-gutter), var(--fr-safe-left)); padding-right: max(var(--fr-page-gutter), var(--fr-safe-right)); padding-bottom: calc(var(--fr-gap-section) + var(--fr-safe-bottom)); max-width: var(--fr-page-max); margin: 0 auto; } .fr-page--flush { padding-top: var(--fr-topbar-offset); } /* ── LIENZO DE MÓDULO · el recorte lateral deja de ser cosa de la pantalla ──────────────────────────────────────────────────────────────────────── `.fr-page` resuelve el recorte por su cuenta y esa geometría está medida y validada. Lo que no lo estaba es la pantalla que compone su PROPIO lienzo dentro del shell: el Registro de Inyección, el kiosco de Indicadores, Calciny, Secuenciación y Turnos cuelgan de `main.container-fluid`, que es de Bootstrap y da 12 px fijos. En un teléfono APAISADO el recorte vale 59 y esos 12 dejaban controles bajo la cámara: medido a 852×393, el buscador y dos botones del Registro de Inyección y una tarjeta de Indicadores. Seis pantallas, una causa. Rehacerlas para que usen `.fr-page` no es de esta fase —y cambiaría su composición, que es lo que el encargo prohíbe—, así que lo que hace el sistema es EXPONER la primitiva y que la consuman. `--modcanvas-pad` es el relleno que la pantalla ya tenía; la primitiva sólo garantiza el suelo del recorte. `max()`, NUNCA suma: en un monitor el inset vale 0, gana el relleno de diseño y no cambia un píxel. */ .fr-modcanvas { padding-left: max(var(--modcanvas-pad, 0px), var(--fr-safe-left)); padding-right: max(var(--modcanvas-pad, 0px), var(--fr-safe-right)); } /* Una pagina ANCHA es mas ancha que la estandar, no infinita. Medido antes de esta fase: a 3.840 px las seis familias con `--wide` servian una composicion de 3.720 px. Una tabla de 3.720 px no se lee: se recorre. */ .fr-page--wide { max-width: var(--fr-wide-max); } /* ── Página PÚBLICA · una tarjeta centrada, sin shell ──────────────────── El sistema daba por hecho que toda pantalla vive bajo la barra: `.fr-page` reserva `--fr-topbar-offset` por arriba. Una pantalla que se sirve SIN autenticar —recuperar contraseña, restablecerla— no tiene barra ni pie, y con `.fr-page` aparecía un hueco de 44 px reservado para algo que no existe. Tampoco es un listado: es UNA tarjeta que se lee centrada. `margin: auto` sobre el hijo y no `justify-content: center`: cuando la tarjeta es más alta que la ventana —contraseña con cinco requisitos en un móvil apaisado— los márgenes automáticos se colapsan y el borde superior sigue siendo alcanzable. Con `center` el contenido desborda por los dos extremos y la parte de arriba queda fuera del scroll. Consumidores: auth/forgot_password.html. El día que `reset_password` vuelva a renderizar (ver F12_CONSUMER_EXCEPTIONS.csv, EX-01) es el segundo, y por eso vive aquí y no en la plantilla. */ .fr-page--public { padding: var(--fr-s8) max(var(--fr-page-gutter), var(--fr-safe-left)); padding-right: max(var(--fr-page-gutter), var(--fr-safe-right)); padding-bottom: calc(var(--fr-s8) + var(--fr-safe-bottom)); min-height: 100vh; min-height: 100dvh; max-width: none; display: flex; } .fr-page--public > * { margin: auto; width: 100%; max-width: var(--fr-public-max, 460px); min-width: 0; } body.fr-shell .fr-page--public { padding-top: var(--fr-s8); } /* Cabecera de una pantalla pública: marca, icono de la operación, título y explicación, centrados. El centrado pertenece a la primitiva —una página pública lo está por definición— y así no vuelve a escribirse como `style="text-align:center"` en cada plantilla. El formulario que va debajo NO se centra: los campos se leen alineados a la izquierda. */ .fr-public-head { text-align: center; margin-bottom: var(--fr-s7); } .fr-public-head > * { margin-inline: auto; } /* La tipografía se declara aquí porque un `

` desnudo dentro de `.fr-app` se lo queda Bootstrap —`calc(1.375rem + 1.5vw)`— y el título de la tarjeta salía al doble de la escala del producto. */ .fr-public-head h1 { margin: 0; font-size: var(--fr-t-h2); font-weight: var(--fr-fw-bold); letter-spacing: -0.01em; line-height: var(--fr-lh-dense); color: var(--fr-text); } .fr-public-head h2 { margin: 0; font-size: var(--fr-t-h3); font-weight: var(--fr-fw-bold); line-height: var(--fr-lh-dense); color: var(--fr-text); } .fr-public-head p { margin: var(--fr-s3) 0 0; } .fr-public-head .fr-icon, .fr-public-head .fr-ico-box, .fr-public-head > svg { margin-bottom: var(--fr-s4); } /* El shell autenticado ya reserva la barra en el `body` (§4.1). Cuando la página vive dentro de él, reservarla otra vez la duplica: medido, 44 px del body + 60 px de la página = 104 px de hueco donde el diseño pide 60. La página conserva su ritmo superior; la reserva la pone el shell, que es quien conoce la barra. */ body.fr-shell .fr-page { padding-top: var(--fr-s6); } body.fr-shell .fr-page--flush { padding-top: 0; } /* ── Página de aplicación ──────────────────────────────────────────────── La cabecera se queda quieta y sólo el cuerpo scrollea. Es la forma de las pantallas de listado de FORTEONE: 18 CRUD la usan desde F-J-01, y hasta ahora la resolvía `.lg-crud-shell` en el CSS de módulo. El idioma ya existía dentro del sistema —`.fr-modal-body`, `.fr-drawer-body` y `.fr-chooser-body` son el mismo `flex:1 1 0; min-height:0; overflow`—; lo que faltaba era exponerlo a nivel de página. `window.scrollY` vale 0 en estas pantallas: quien scrollea es el cuerpo. `FR.topbar.watch()` ya lo contempla escuchando en fase de captura, y una pantalla puede además declararlo con `data-fr-scroller`. */ .fr-page--app { height: calc(100vh - var(--fr-topbar-offset) - var(--fr-page-foot)); height: calc(100dvh - var(--fr-topbar-offset) - var(--fr-page-foot)); display: flex; flex-direction: column; /* `auto`, no `hidden`: es la red de seguridad que el contenedor legacy ya había aprendido (F-K-01). Si el cálculo se desajusta en algún módulo, el contenido aparece con scroll en vez de recortarse sin remedio. */ overflow-y: auto; overflow-x: hidden; padding-bottom: 0; } /* El envoltorio del shell añade su relleno vertical arriba y abajo. La página de aplicación calcula su alto sobre el hueco REAL, así que ese relleno se descuenta: sin esto el documento pide 32 px más de los que hay y aparece un scroll exterior por encima del scroll del cuerpo. El contenedor legacy lo resolvía tirando hacia arriba con `margin-top: -1rem`; descontarlo del alto deja el borde inferior en el mismo sitio sin recurrir a un margen negativo. Sale del TOKEN, no del `2rem` escrito a mano que había aquí: en móvil el envoltorio se compacta a la mitad (§1.17b) y una constante copiada dejaría la página 16 px más corta de lo que hay, con banda muerta al final. */ body.fr-shell .fr-page--app { height: calc(100vh - var(--fr-topbar-offset) - var(--fr-page-foot) - var(--fr-shell-pad-block) * 2); height: calc(100dvh - var(--fr-topbar-offset) - var(--fr-page-foot) - var(--fr-shell-pad-block) * 2); } @media (max-width: 768px) { /* El zócalo del sistema se descuenta aquí porque el body sólo compensa la inserción inferior cuando el pie sigue fijo, y en táctil ya no lo está. */ .fr-page--app, body.fr-shell .fr-page--app { height: calc(100dvh - var(--fr-topbar-offset) - var(--fr-page-foot) - var(--fr-shell-pad-block) * 2 - var(--fr-safe-bottom)); } } /* El único hijo que scrollea. Sin `min-height: 0` un hijo flexible se niega a encogerse por debajo de su contenido y el scroll se va a la ventana. */ .fr-page-body { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-bottom: var(--fr-s7); } /* Lo que acompaña al cuerpo dentro de la página de aplicación no se encoge: cabecera, franja de filtros y paginación conservan su alto. */ .fr-page--app > :not(.fr-page-body) { flex: 0 0 auto; } /* Shell de pantalla completa: el pie identitario se apoya en el fondo de la ventana aunque el contenido sea corto. */ .fr-app--shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* Un contenedor centrado con `margin: 0 auto` dentro de un flex en columna pierde el estirado del eje transversal y se dimensiona por su contenido: en móvil eso convierte cualquier pieza ancha en scroll horizontal de TODA la página. width:100% lo devuelve al ancho del contenedor sin tocar el max-width ni el centrado en pantallas grandes. */ .fr-app--shell > * { width: 100%; min-width: 0; } .fr-app--shell > .fr-page, .fr-app--shell > main { flex: 1 1 auto; } /* ── Pantalla del producto SIN barra superior (05B · ola 11) ───────────── El sistema daba por hecho que toda pantalla interna vive bajo la topbar: `.fr-page` reserva `--fr-topbar-offset` por arriba, el stack pegajoso cuelga de ahí y la reserva del pie fijo la emite `body.fr-shell`. Hay pantallas que son STANDALONE —no heredan de base.html, así que no reciben ni la barra ni la clase de shell— y aun así SON la aplicación: las tres de Nuevos Moldes. Antes de esto la única forma de decirlo era redefinir `--fr-topbar-h` en la hoja del módulo, que es justo lo que prohíbe el gate de tokens y con razón: la altura de la barra es del sistema, no de una pantalla. `--nobar` lo declara UNA vez y todo lo derivado cae solo en su sitio: el relleno superior de la página, el `top` de las barras pegajosas, la cabecera pegajosa de las tablas y la reserva del pie. El notch se sigue sumando porque vive en `--fr-topbar-offset`, no en la altura. NO se confunde con `.fr-page--public`, que sirve a las pantallas sin autenticar: aquéllas no llevan pie y son UNA tarjeta centrada; ésta es una pantalla interna completa que sí lo lleva. */ .fr-app--nobar { --fr-topbar-h: 0px; } body.fr-app--nobar { padding-bottom: calc(var(--fr-footer-h) + var(--fr-safe-bottom)); } @media (max-width: 991.98px), (pointer: coarse) { /* Mismo umbral que libera --fr-footer-h y devuelve el pie al flujo: la reserva sobra y dejaría un hueco muerto. */ body.fr-app--nobar { padding-bottom: 0; } } /* ══════════════════════════════════════════════════════════════════════ 4.3 · STICKY STACK ══════════════════════════════════════════════════════════════════════ Tres niveles y ni uno más. Todos derivan de --fr-sticky-top, que a su vez deriva de la altura real de la topbar y de la toolbar. Cambiar la altura de la barra reposiciona el stack entero sin tocar módulos. L1 topbar fija, --fr-z-topbar L2 toolbar sticky bajo la topbar, --fr-z-toolbar L3 dock sticky al zócalo, --fr-z-dock thead sticky bajo el stack, --fr-z-thead */ .fr-toolbar { position: sticky; top: var(--fr-topbar-offset); z-index: var(--fr-z-toolbar); display: flex; align-items: center; gap: var(--fr-s4); flex-wrap: wrap; padding: var(--fr-s4) var(--fr-s5); background: var(--fr-work); border: 1px solid var(--fr-line-1); border-radius: var(--fr-r-card); box-shadow: var(--fr-sh-contact); } .fr-toolbar-spacer { flex: 1 1 auto; } /* ── EL RECUENTO VIVE EN LA TOOLBAR ────────────────────────────────────── VU-02. Un maestro contesta al buscador con cuántos registros quedan («2467 moldes», «65 máquinas de 155»): el estado se lee al lado de lo que lo produce, no en la cabecera ni en un chip junto al título. Es el patrón de Moldes, promovido a sistema para que lo consuma la familia. */ .fr-toolbar-status { margin-left: auto; font-size: var(--fr-t-mini); color: var(--fr-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .fr-toolbar-status strong { color: var(--fr-text); font-weight: var(--fr-fw-bold); } .fr-toolbar-status.is-filtered { color: var(--fr-teal); font-weight: var(--fr-fw-bold); } /* Segunda línea de una franja de mando: filtros, chips, selects. Ocupa el ancho entero y envuelve; en la franja estrecha del sistema (≤700 px) hereda la tira horizontal, como el resto de piezas. */ .fr-toolbar-row { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: var(--fr-s3); flex-wrap: wrap; } /* ── DENTRO DE UN SCROLLER, LA REFERENCIA ES EL SCROLLER ───────────────── `--fr-topbar-offset` describe el STACK DE LA VENTANA: la barra fija más el recorte del dispositivo. Dentro de `.fr-page--app` ese hueco NO existe —el scrollport empieza en el borde de la caja, ya por debajo de la barra— y el navegador aplica el desplazamiento igual: la franja se coloca esa misma cantidad POR DEBAJO de su sitio y tapa lo que viene detrás. Es el mismo defecto que el sistema ya corrigió para `thead` dentro de `.fr-table-scroller` (05-components §5.4), y lleva vivo en las veinte pantallas CRUD desde entonces: 50 px de desplazamiento con ratón, que no llegaban a solaparse por poco. Con el recorte de un teléfono son 109 y sí: medido en el catálogo técnico a 768×1024 y 820×1180, la franja se montaba 5 px sobre el primer control de la migas. Lo destapó simular el notch, no mirar la pantalla. */ .fr-page--app .fr-toolbar, .fr-page--app .fr-sticky-top { top: 0; } /* Y la CABECERA DE TABLA es el tercer caso, por la misma razón exacta. Se corrigió para el scroller horizontal (05-components §5.4) y para las dos franjas de arriba, pero una tabla servida directamente dentro del cuerpo de una página de aplicación seguía llevando el offset de la ventana: el scrollport es `.fr-page-body`, que empieza ya por debajo de la barra. Aquí no hay ninguna hoy —el inventario las sirve todas con scroller— y por eso no aparece en la medición; se escribe para que la siguiente que se escriba nazca bien, que es de lo que trata tener un sistema. */ .fr-page--app .fr-table th { top: 0; } /* Primitiva genérica: cualquier barra que deba pegarse bajo el stack. */ .fr-sticky-top { position: sticky; top: var(--fr-sticky-top); z-index: var(--fr-z-toolbar); } /* Cualquier destino de scroll (ancla, campo con error) debe respetar el stack por arriba y el dock por abajo. */ .fr-scroll-target { scroll-margin-block-start: calc(var(--fr-sticky-top) + 12px); scroll-margin-block-end: calc(var(--fr-dock-h) + var(--fr-safe-bottom) + 12px); } /* ── EL SCROLLPORT SABE LO QUE TIENE ENCIMA ───────────────────────────── `.fr-scroll-target` es de ADHESIÓN: sólo protege a quien se apunta. Y el navegador desplaza por su cuenta muchas más veces de las que una clase puede cubrir —`scrollIntoView()`, `focus()`, un `#ancla`, Tab, la navegación por teclado de una tabla, el salto a un campo con error— y en todas ellas deja el destino pegado al borde del scrollport, que aquí es justo donde está la barra fija. `scroll-padding` lo resuelve del lado correcto: lo declara el CONTENEDOR, una vez, y vale para cualquier desplazamiento que ocurra dentro. Es la mitad que faltaba de la pareja `scroll-margin` / `scroll-padding`. Dos scrollports y dos referencias distintas, que es la regla de §4.3: la VENTANA descuenta la barra fija más la franja de mando; el CUERPO de una página de aplicación empieza ya por debajo de la barra y sólo descuenta lo que se pega dentro de él. No cambia un píxel de la composición: `scroll-padding` no ocupa espacio, sólo mueve el punto donde se detiene un desplazamiento. */ html { scroll-padding-block-start: calc(var(--fr-sticky-top) + 12px); scroll-padding-block-end: calc(var(--fr-dock-h) + var(--fr-footer-h) + var(--fr-safe-bottom) + 12px); } .fr-page-body, .fr-modal-body, .fr-drawer-body { scroll-padding-block-start: calc(var(--fr-toolbar-h) + 12px); scroll-padding-block-end: calc(var(--fr-dock-h) + var(--fr-safe-bottom) + 12px); } /* Dentro de un scroller de tabla la cabecera se pega en `top: 0`, así que lo que hay que descontar es su alto REAL. No hay token para eso —depende de la densidad de cada tabla— y por eso se publica desde el componente. */ .fr-table-scroller, .fr-table-wrap { scroll-padding-block-start: var(--fr-thead-h, 34px); } /* Action dock inferior (L3) */ .fr-dock { position: sticky; bottom: 0; z-index: var(--fr-z-dock); display: flex; align-items: center; justify-content: flex-end; gap: var(--fr-s4); padding: var(--fr-s4) var(--fr-s6); padding-bottom: calc(var(--fr-s4) + var(--fr-safe-bottom)); margin-block: var(--fr-s6) 0; margin-inline: calc(-1 * max(var(--fr-page-gutter), var(--fr-safe-left))) calc(-1 * max(var(--fr-page-gutter), var(--fr-safe-right))); border-top: 1px solid rgba(240, 238, 233, 0.10); } .fr-dock .fr-dock-meta { margin-right: auto; color: var(--fr-text-inv-2); font-size: var(--fr-t-mini); } /* Dock anclado a la ventana: para formularios largos cuyo dock no vive dentro del contenedor con scroll. El alto real lo publica forte-ui.js en --fr-dock-h para que scroll-margin y padding lo respeten. F07_DEBT_01 — el dock se apoya SOBRE el pie identitario, no debajo. Con `bottom: 0` quedaba tapado: el pie fijo vive en --fr-z-footer (1000), muy por encima de --fr-z-dock, y cada pantalla con dock fijo acababa sumando a mano los 28 px del pie en sus paddings. El offset es del sistema y sale del mismo token que posiciona el pie, así que en cuanto el pie vuelve al flujo (<992px o táctil) --fr-footer-h vale 0 y el dock baja solo. */ .fr-dock--fixed { position: fixed; left: 0; right: 0; margin: 0; bottom: var(--fr-footer-h, 0px); z-index: var(--fr-z-dock); } .fr-app--dock { padding-bottom: calc(var(--fr-dock-h, 56px) + var(--fr-footer-h, 0px) + var(--fr-safe-bottom)); } /* Un dock FIJO va de borde a borde de la ventana, así que los cuatro lados miran al recorte: abajo el indicador de inicio, a los costados la cámara de un teléfono apaisado. Con `max()`, que en un monitor no cambia nada. */ .fr-dock--fixed { padding-left: max(var(--fr-s6), var(--fr-safe-left)); padding-right: max(var(--fr-s6), var(--fr-safe-right)); } @media (max-width: 700px) { /* Por lados, NO abreviado: `padding: a b` repone también el inferior y se llevaba por delante la reserva de la barra de gestos que `.fr-dock` declara arriba, dejando los botones del dock justo debajo del indicador de inicio. Mismo defecto de abreviado que el marco del modal en 07-responsive. FORTE_IOS_IPADOS_HARDENING_02. */ .fr-dock--fixed { flex-wrap: wrap; gap: var(--fr-s3); padding-top: var(--fr-s3); padding-left: max(var(--fr-s5), var(--fr-safe-left)); padding-right: max(var(--fr-s5), var(--fr-safe-right)); padding-bottom: calc(var(--fr-s3) + var(--fr-safe-bottom)); } .fr-dock--fixed .fr-dock-meta { width: 100%; margin-right: 0; } .fr-dock--fixed .fr-btn { flex: 1 1 auto; } } /* ══════════════════════════════════════════════════════════════════════ 4.4 · FOOTER IDENTITARIO (OD-2 · A — zócalo táctil liberado) ══════════════════════════════════════════════════════════════════════ El footer va EN FLUJO por defecto. En escritorio puede fijarse con `.fr-footer--fixed` (franja fina de 24 px). En móvil y tablet nunca se fija: el zócalo queda para el action dock. Eso recupera 24 px permanentes y elimina el acoplamiento «toda barra debe conocer la altura del footer», que ya mordió en PARAMREG. NOTA DE MARCADO: este componente se escribe con `div`, no con `