/* Tipografía del portal — base común. * * Criterio: UNE-EN 301 549 (adopción española de EN 301 549), armonizada con * WCAG 2.1 nivel AA. Lo que se cumple aquí y por qué: * * 1.4.4 Redimensionar texto (AA) · tamaños en rem, nunca en px: el texto tiene * que poder llegar al 200 % con el zoom de * texto del navegador. Un font-size en px no * se mueve y deja fuera a quien lo necesita. * 1.4.12 Espaciado del texto (AA) · interlineado 1,5 en texto corrido. * 1.4.3 Contraste (AA) · 4,5:1 en texto normal. Los colores viven en * portal-unified.css; aquí solo la letra. * * Tamaño base: 16 px, que es el que trae el navegador por defecto. Referencias * públicas para ese mínimo: GOV.UK Design System (19 px escritorio / 16 px móvil) * y U.S. Web Design System (16 px). Suelo absoluto de esta escala: 12 px. * * Fuente: Inter (SIL Open Font License 1.1), autoalojada en public/fonts/. * Va autoalojada a propósito, por tres motivos: * - seis de las diez páginas del portal no cargaban el enlace a Google Fonts y * caían a Segoe UI sin avisar: de ahí la sensación de falta de nitidez; * - el portal sigue funcionando sin salida a internet; * - pedirla a Google envía la IP de cada usuario a un tercero, que en la UE es * un problema de RGPD con jurisprudencia en contra. * * Inter está diseñada para pantalla (altura de x grande, se lee bien en cuerpos * pequeños) y trae cifras tabulares, que en un portal lleno de unidades, stock y * precios hace que las columnas de números cuadren. */ /* Variable de peso 100–900 en un solo fichero. El navegador descarga el * subconjunto latino (48 KB) y solo baja el extendido si aparece un carácter * que lo necesite. */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100 900; src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* La familia, en un solo sitio. El resto de hojas heredan o usan la variable. */ --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --fuente-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', monospace; /* Escala modular. Cada paso es legible por sí solo; el salto es corto a * propósito porque esto es una interfaz densa de datos, no una revista. */ --fs-3xs: 0.75rem; /* 12 px · SUELO. Nada del portal baja de aquí. */ --fs-2xs: 0.8125rem; /* 13 px · metadatos muy secundarios */ --fs-xs: 0.875rem; /* 14 px · etiquetas, ayudas, celdas densas de tabla */ --fs-sm: 0.9375rem; /* 15 px · texto secundario */ --fs-base: 1rem; /* 16 px · CUERPO */ --fs-md: 1.125rem; /* 18 px · texto destacado */ --fs-lg: 1.25rem; /* 20 px · subtítulos */ --fs-xl: 1.5rem; /* 24 px · títulos de sección */ --fs-2xl: 1.875rem; /* 30 px · títulos de página */ --fs-3xl: 2.25rem; /* 36 px · cifras grandes de los indicadores */ /* Interlineado. 1,5 en cuerpo es requisito de 1.4.12, no preferencia. */ --lh-apretado: 1.25; /* solo títulos, que son de una o dos líneas */ --lh-normal: 1.5; /* CUERPO — el mínimo que pide la norma */ --lh-suelto: 1.625; /* párrafos largos */ --peso-normal: 400; --peso-medio: 500; --peso-semi: 600; --peso-fuerte: 700; } /* No tocamos el font-size de :root. Poner aquí un porcentaje menor que 100 % * reduciría todo el rem del portal y dejaría sin efecto la preferencia que el * usuario haya puesto en su navegador. */ html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--fuente); font-size: var(--fs-base); line-height: var(--lh-normal); /* En pantallas normales el suavizado por subpíxel del sistema es MÁS nítido * que -webkit-font-smoothing: antialiased, que adelgaza el trazo y es lo que * suele confundirse con falta de definición. Se deja el del sistema. */ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* Los controles de formulario no heredan la fuente por defecto en ningún * navegador: hay que decírselo, o los select y los input salen en otra letra. */ button, input, select, textarea, optgroup { font-family: inherit; font-size: inherit; line-height: var(--lh-normal); } /* Cifras tabulares donde hay números que deben cuadrar en columna: unidades, * stock, importes, referencias. Es la razón funcional de elegir Inter. */ table, .tabular, [data-numerico], input[type='number'] { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Jerarquía por defecto. Cada hoja puede afinar, pero nadie debería bajar de * --fs-3xs ni usar px. */ h1 { font-size: var(--fs-2xl); line-height: var(--lh-apretado); font-weight: var(--peso-fuerte); } h2 { font-size: var(--fs-xl); line-height: var(--lh-apretado); font-weight: var(--peso-semi); } h3 { font-size: var(--fs-lg); line-height: var(--lh-apretado); font-weight: var(--peso-semi); } h4 { font-size: var(--fs-md); line-height: var(--lh-apretado); font-weight: var(--peso-semi); } h5, h6 { font-size: var(--fs-base); line-height: var(--lh-normal); font-weight: var(--peso-semi); } small, .texto-menor { font-size: var(--fs-xs); } code, kbd, pre, samp { font-family: var(--fuente-mono); font-size: var(--fs-xs); } /* 1.4.12 exige que el texto siga usable cuando el usuario fuerza su propio * espaciado. No lo imponemos; lo que hacemos es no impedirlo: nada de alturas * fijas sobre texto en esta hoja. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }