/* ===================================================================== psf-tokens.css — Sistema de diseño de psicofarma.co --------------------------------------------------------------------- ÚNICA fuente de verdad de color, tipografía, espacio y forma. [v7.0.0 · D-110] IDENTIDAD «CLINICAL ARCHIVE». La paleta crema/terracota y las familias Fraunces/Montserrat se retiran por encargo del autor (27-08-2026) y entra la identidad de la maqueta Stitch: base blanca con grises fríos, azul marino profundo (#1A365D) como marca, salvia como acento orgánico y azul receptor (#4A90E2) para lo interactivo; títulos en Source Serif 4 y cuerpo en Hanken Grotesk. Cambian los VALORES, no la arquitectura: los nombres de token, el doble token -tx para todo acento que pueda llevar texto [D-4], los colores por clase y por sistema, la escala tipográfica [D-47] y las medidas [D-41/D-43] se conservan. Todos los valores nuevos verificados AA (≥4,5:1) sobre los tres fondos: --pf-paper, --pf-surface y --pf-paper-alt. Historia previa: traducción literal de las secciones 3, 4 y 5 de claude/lineamientos-diseno-psicofarma.md, más las decisiones tomadas en la reconciliación del 29-07-2026 (marcadas con [D-n]). REGLA DURA: ninguna otra hoja de estilo del plugin puede declarar un valor hex, un tamaño de fuente ni un espaciado literal. Todo sale de aquí. Si falta algo, se añade aquí y se anota en el documento de diseño — no se inventa en el punto de uso. PREFIJO --pf-, no --psf-. [D-3] El prefijo --psf- ya estaba ocupado: psf-fichas.css y psf-dx.css declaran --psf-surface:#f7f8fa sobre .psf-ficha y .psf-dx. Como esa declaración local gana para todos sus descendientes, cualquier componente colocado dentro de una ficha veía su superficie cambiar de blanco a gris azulado — y ahí es justo donde van a vivir los componentes a partir del paso 5. El mismo nombre significaba dos cosas según dónde estuviera. Se renombra el sistema entero a --pf-. DOBLE TOKEN PARA TODO ACENTO QUE PUEDA LLEVAR TEXTO. [D-4] Ocho colores del catálogo del documento no llegan a 4,5:1 sobre el papel o sobre su propio tinte, y con ellos se estaban pintando las migas, los chips, los títulos de callout, la leyenda de evidencia, el hueco declarado y la trazabilidad: 24 fallos AA medidos sobre 115 nodos de texto. El documento ya daba la regla para el terracota («úsalo en ≥18 px semibold o como fondo y borde, nunca en cuerpo pequeño»); esto la generaliza. El valor de catálogo se conserva INTACTO para relleno, punto, barra y borde —la identidad no cambia ni un pixel— y cada acento estrena una variante `-tx` del mismo tono con la luminosidad justa para 4,5:1, que es la única autorizada para pintar texto. Verificado sobre --pf-paper, --pf-surface y --pf-paper-alt, que son los tres fondos donde puede caer. Pasos 1 y 2 de la sección 12 (Encargo de construcción). ===================================================================== */ :root{ /* ───────────────────────────────────────────────────────────── 1. NEUTROS — la base, el 90 % de lo que se ve [diseño §3.1] ───────────────────────────────────────────────────────────── */ --pf-paper: #F8F9FA; /* fondo principal de página (gris frío casi blanco) */ --pf-paper-alt: #F3F4F5; /* secciones alternas, filas y encabezados de tabla */ --pf-band: #FFFFFF; /* banda del encabezado: blanca, separada por filete */ --pf-surface: #FFFFFF; /* tarjetas y contenedores elevados */ /* La letra del badge de evidencia usa var(--pf-surface) como tinta sobre el color del grado: los cinco están verificados (mínimo 4,55:1). NO se admite ese patrón sobre un color de CLASE: el blanco baja a 3,45:1 sobre noradrenalina/dopamina. Cuando un rótulo pequeño tiene que llevar el color de la clase, va en contorno, no en relleno. [D-15] */ --pf-ink: #191C1D; /* texto principal (gris tinta, frío) */ --pf-ink-soft: #43474E; /* texto secundario, descripciones, metadatos */ --pf-ink-faint: #74777F; /* terciario: puntos, iconos, bordes. NO para texto */ --pf-ink-faint-tx: #5D6169; /* la misma tinta, apta para texto. Peor caso 5,64:1 */ --pf-line: #E9ECEF; /* filete de 1px: bordes, divisores, líneas de tabla */ /* ───────────────────────────────────────────────────────────── 2. MARCA [diseño §3.2] ───────────────────────────────────────────────────────────── */ --pf-brand: #1A365D; /* azul marino profundo — la gravedad académica */ --pf-brand-deep: #002045; /* hover / presionado */ --pf-brand-tx: #1A365D; /* el marino ya es tinta: 11,03:1 en el peor fondo */ --pf-brand-tint: #EEF3FB; /* fondo suave (caja de perlas clínicas) */ /* Bordes de los fondos tintados. Se documentan aquí para que ninguna hoja de componentes tenga que declarar un hex. */ --pf-brand-line: #C9D6EA; /* borde de la caja de perlas sobre --brand-tint */ --pf-ok-line: #CFDFD6; /* borde del chip "Actualizado" sobre --ok-tint */ /* [D-110] ACENTO INTERACTIVO — «azul receptor». La maqueta lo reserva para enlaces, puntos de dato activos y estados activos; la marca (marino) queda para títulos y acciones primarias. Doble token [D-4]: el valor de catálogo (#4A90E2) da 3,17:1 sobre blanco y NUNCA pinta texto; la variante -tx (4,87:1 peor caso) es la única autorizada. */ --pf-accent: #4A90E2; /* relleno, borde, trazo activo de gráficos */ --pf-accent-tx: #2F6CB3; /* enlaces y texto interactivo */ --pf-accent-tint: #EAF2FC; /* fondo suave de estado activo */ /* [D-110] SALVIA — el toque orgánico de la maqueta. Referencias biológicas, callouts suaves y chips de categoría. */ --pf-sage: #86A69D; /* relleno y borde. 2,26:1: nunca texto */ --pf-sage-tx: #46645D; /* texto. Peor caso 5,88:1 */ --pf-sage-tint: #E4EFEB; /* fondo suave */ /* Pie de página. [D-110] La maqueta manda «evitar fondos oscuros por completo»: el pie deja de invertir tinta y papel y pasa a ser una banda clara separada por filete. Los tokens se conservan para que ninguna hoja cambie de nombre de variable. */ --pf-footer-bg: #F3F4F5; --pf-footer-ink: #43474E; --pf-footer-strong: #191C1D; --pf-footer-link: #1A365D; /* marino: autoría, nunca reclamo */ /* ───────────────────────────────────────────────────────────── 3. COLOR POR ÁREA [diseño §3.3] ───────────────────────────────────────────────────────────── */ --pf-cat-principios: #4A5C80; /* azul pizarra — se conserva: ya era frío */ --pf-cat-farmacos: #1A365D; /* marino (= marca) [D-110] */ --pf-cat-diagnosticos: #8C5A9E; /* violeta apagado */ --pf-cat-sobremi: #46645D; /* salvia (= --pf-sage-tx) [D-110] */ /* Variantes de texto de las cuatro áreas [D-4] */ --pf-cat-principios-tx: #4A5C80; /* 6,09:1 sobre los fondos nuevos */ --pf-cat-farmacos-tx: #1A365D; /* = --pf-brand-tx */ --pf-cat-diagnosticos-tx: #7E518E; /* peor caso 5,52:1 */ --pf-cat-sobremi-tx: #46645D; /* peor caso 5,88:1 */ /* ───────────────────────────────────────────────────────────── 4. COLOR POR CLASE FARMACOLÓGICA [diseño §3.3] ───────────────────────────────────────────────────────────── Hexes tomados de producción (assets/psf-archivo.css, líneas 30-41), que es donde vive hoy el subsistema real. Las maquetas proponían una paleta paralela que desviaba en tricíclicos, NMDA y VMAT2: se resuelve a favor de producción. [D-1] ÚNICA EXCEPCIÓN — antipsicóticos pasa de #8C5A9E a #7B5EA7. El valor de producción era idéntico, dígito a dígito, a --pf-cat-diagnosticos, y en cuanto las migas de pan y el estado activo del menú se colorean por área (diseño §3.3) el lector no puede distinguir la clase del área. #7B5EA7 es el valor de la maqueta de la ficha, conserva el violeta y deshace la colisión. Aprobado por el autor el 29-07-2026. Cada clase tiene su tono base y su tono claro (-2), tal como el sitio ya los usaba como --ar-acento / --ar-acento-2, más la variante -tx apta para texto [D-4]: siete de los once colores de producción quedan por debajo de 4,5:1 sobre el papel, así que el nombre de la clase, el chip y las migas no podían pintarse con el valor base. Se descarta expresamente la paleta de las maquetas. El §3.3 manda «conservar ese subsistema y documentar el hex de cada clase en un solo lugar»: manda conservar lo que existe, no importar lo que la maqueta propuso. La paleta de la maqueta desviaba en tricíclicos, NMDA y VMAT2 sin justificación. */ /* base (punto, borde, barra, relleno) · claro (-2) · texto (-tx) [D-4] */ --pf-cls-isrs: #4D7EA8; --pf-cls-isrs-2: #7BA7C9; --pf-cls-isrs-tx: #436D92; --pf-cls-antipsicoticos: #7B5EA7; --pf-cls-antipsicoticos-2: #A38FC4; --pf-cls-antipsicoticos-tx: #785AA5; /* [D-1] */ --pf-cls-adep-dual: #3F8F85; --pf-cls-adep-dual-2: #6FB3AA; --pf-cls-adep-dual-tx: #33746C; --pf-cls-adep-multimodal: #7A6FAF; --pf-cls-adep-multimodal-2: #A396CF; --pf-cls-adep-multimodal-tx: #6B5FA6; --pf-cls-adep-nadopa: #C07A3A; --pf-cls-adep-nadopa-2: #D6A06A; --pf-cls-adep-nadopa-tx: #935D2C; --pf-cls-adep-melatonina: #4A5A9E; --pf-cls-adep-melatonina-2: #7F8CC4; --pf-cls-adep-melatonina-tx: #4A5A9E; --pf-cls-adep-nmda: #6D4C9F; --pf-cls-adep-nmda-2: #9D84C4; --pf-cls-adep-nmda-tx: #6D4C9F; /* [D-85 · v6.19.0] Estabilizadores. Gris azulado mineral, a juego con el acento de la carpeta: el litio es un elemento, no una molécula diseñada. Contraste del tono -tx sobre papel medido en 6,4:1, por encima del 4,5 que pide AA. */ --pf-cls-estabilizadores: #4A6274; --pf-cls-estabilizadores-2: #7D97A8; --pf-cls-estabilizadores-tx: #3F5464; --pf-cls-triciclicos: #9A7B4F; --pf-cls-triciclicos-2: #C0A273; --pf-cls-triciclicos-tx: #7F6541; --pf-cls-vmat2: #2F8F8F; --pf-cls-vmat2-2: #66B6B6; --pf-cls-vmat2-tx: #267373; --pf-cls-psicoestimulantes: #A8562F; --pf-cls-psicoestimulantes-2: #CF8A5F; --pf-cls-psicoestimulantes-tx: #A2532D; /* [D-56] Benzodiacepinas. Verde oliva apagado: es el unico matiz que quedaba libre entre los once anteriores, y el que menos se confunde con el teal de los duales (#3F8F85) y del VMAT2 (#2F8F8F), que son azulados. Blanco sobre la base da 4,55:1 —por encima del 4,32:1 del azul ISRS, que ya estaba aceptado— y la variante -tx da 5,38:1 sobre papel y 4,93:1 sobre papel alterno. */ --pf-cls-benzodiacepinas: #5C7F52; --pf-cls-benzodiacepinas-2: #8CAB82; --pf-cls-benzodiacepinas-tx: #4F6B46; --pf-cls-otros: #8A8072; --pf-cls-otros-2: #A89E90; --pf-cls-otros-tx: #70685D; /* ───────────────────────────────────────────────────────────── 4 bis. COLOR POR SISTEMA DE NEUROTRANSMISOR [D-102] ───────────────────────────────────────────────────────────── Cinco tonos para la barra de afinidades. NO son colores de clase de fármaco: agrupan RECEPTORES por el sistema al que pertenecen, que es un eje distinto y que aparece a la vez que el de clase en la misma página. Por eso viven aparte y no reutilizan --pf-cls-*. EL COLOR NO ES LA INFORMACIÓN, y aquí importa más que en ningún otro componente. Cada bolita lleva el nombre del receptor escrito dentro; el color solo agrupa. Quien no distinga los tonos lee la barra igual de bien (§1.4.1, el mismo criterio que ya se aplicó a la figura del receptor). Doble token, como manda [D-4]. El relleno conserva el tono elegido; la variante -tx es la única autorizada para texto. Peores casos medidos sobre --pf-paper, --pf-surface y --pf-paper-alt: dopamina relleno 4,48:1 texto 4,74:1 serotonina relleno 4,49:1 texto 4,72:1 histamina relleno 3,27:1 texto 4,60:1 muscarínico relleno 4,13:1 texto 4,61:1 adrenérgico relleno 4,87:1 texto 4,87:1 La histamina es la que más se aleja en relleno (3,27:1) y por eso su -tx es el que más se oscurece: el ocre claro es imprescindible para que H1 se distinga del terracota de marca, pero no vale como tinta. */ --pf-sys-dopamina: #3E6D9C; --pf-sys-dopamina-tx: #3C6997; --pf-sys-serotonina: #8557A0; --pf-sys-serotonina-tx: #81549B; --pf-sys-histamina: #B5701F; --pf-sys-histamina-tx: #945B19; --pf-sys-muscarinico: #4F7A46; --pf-sys-muscarinico-tx: #497240; --pf-sys-adrenergico: #A8443F; --pf-sys-adrenergico-tx: #A8443F; /* Color de la clase activa en la página. Cada plantilla lo asigna a partir del término de taxonomía; NUNCA se escribe un hex en el punto de uso. Valor por defecto: el color del área Fármacos. */ --pf-cls: var(--pf-cat-farmacos); --pf-cls-tx: var(--pf-cat-farmacos-tx); --pf-cls-2: var(--pf-brand-tint); /* ───────────────────────────────────────────────────────────── 5. SEMÁNTICOS — señalización clínica [diseño §3.4] ───────────────────────────────────────────────────────────── COMUNICAN, NO DECORAN. Mostaza es siempre precaución; rojo apagado es siempre alerta grave. Ningún componente puede usarlos por motivos estéticos. */ --pf-info: #4A5C80; --pf-info-tint: #E7ECF3; /* nota, mecanismo */ --pf-warn: #9A6A00; --pf-warn-tint: #F8F1E0; /* precaución, ajuste, población especial */ --pf-danger: #BA1A1A; --pf-danger-tint: #FBEAE8; /* contraindicación, alerta grave */ --pf-ok: #3F7D5C; --pf-ok-tint: #E6EFE9; /* evidencia favorable */ /* Variantes de texto. El título de un callout va SIEMPRE con la -tx: el valor de catálogo sobre su propio tinte da 4,13:1 (warn) y 4,08:1 (ok), y el título de un callout es texto pequeño. [D-4] */ --pf-info-tx: #2D476F; /* peor caso 7,89:1 */ --pf-warn-tx: #825900; /* peor caso 5,52:1 */ --pf-danger-tx: #A11D1D; /* peor caso 6,66:1 */ --pf-ok-tx: #376D50; /* peor caso 5,16:1 */ /* ───────────────────────────────────────────────────────────── 6. EVIDENCIA — eje 1: FUERZA [diseño §6.7] ───────────────────────────────────────────────────────────── Escala fija A → D más I (insuficiente). Triple señal siempre: letra + color + barra proporcional. Este es el ÚNICO eje de evidencia que lleva color. Ver la nota del eje 2, abajo. [D-5] El grado B pasa de #7A8B4A a #6D7C42. El badge lleva letra blanca sobre el color del grado, y con el valor de catálogo daba 3,74:1. El badge es texto pequeño, así que no se acoge a la excepción de texto grande. Bajar la luminosidad un 4,5 % lo lleva a 4,55:1 sin cambiar el tono oliva. Es el único valor del catálogo del documento de diseño que se modifica. Los cinco badges, verificados con letra blanca: A 4,88 · B 4,55 · C 4,73 · D 7,43 · I 4,60. PENDIENTE [Parte II, C5]: el criterio de asignación de cada letra no está definido en ningún documento y el autor debe decidirlo (definirlo en una página de metodología, o retirar la escala). Los tokens existen; la asignación no se aplica hasta entonces. */ --pf-g-a: #3F7D5C; --pf-g-a-w: 92%; /* fuerte */ --pf-g-b: #6D7C42; --pf-g-b-w: 70%; /* moderada [D-5] ver nota */ --pf-g-c: #9A6A00; --pf-g-c-w: 48%; /* limitada */ --pf-g-d: #8E3B34; --pf-g-d-w: 26%; /* desfavorable */ --pf-g-i: #70737B; --pf-g-i-w: 12%; /* insuficiente. [D-110] gris frío; blanco encima 4,74:1 */ /* ───────────────────────────────────────────────────────────── 7. EVIDENCIA — eje 2: PROCEDENCIA [contenido §4.5] ───────────────────────────────────────────────────────────── [D-2] Responde una pregunta DISTINTA de la fuerza: ¿el ensayo es de este fármaco en esta indicación, o se extrapola de su clase? REGLA QUE EVITA LA CONFUSIÓN: la procedencia NO lleva color propio. Se comunica por FORMA (círculo lleno → medio → punteado → vacío) y por palabra en monoespaciada, siempre en --pf-ink-soft. Así los dos ejes nunca compiten, y la señal sigue funcionando en daltonismo y en impresión en blanco y negro (diseño §8). */ --pf-proc-color: var(--pf-ink-soft); /* los cuatro niveles, igual */ --pf-proc-d: 11px; /* diámetro de la marca */ /* [D-6] LAS MARCAS SE DIBUJAN CON CSS, NO SON CARACTERES. ● ◐ ○ ◌ no están en el subconjunto latino de ninguna de las cuatro familias tipográficas —ni en la versión de Google Fonts—, así que los pintaba la fuente instalada en el equipo del lector: cambiaban de tamaño, de grosor y de alineación entre Windows, macOS y Android. Una señal del sistema no puede depender de eso. Ahora son geometría: un disco de 11 px con distinto relleno y distinto borde. El carácter queda solo como texto alternativo en el HTML, para el lector de pantalla. [D-7] ASIGNACIÓN CORREGIDA. El orden de ausencia creciente es lleno → medio → contorno → punteado, y el punteado es el que más ausencia sugiere: le corresponde al HUECO, no a «de clase». Antes estaban cruzados: «de clase» llevaba el punteado y el hueco —la ausencia total— se quedaba con la forma más sólida de las dos. ● propia disco lleno ◐ propia con reparos medio disco ○ de clase contorno continuo ◌ hueco contorno punteado */ /* ───────────────────────────────────────────────────────────── 8. TIPOGRAFÍA — familias [diseño §4.1] ───────────────────────────────────────────────────────────── */ /* [D-110] Source Serif 4 sustituye a Fraunces (editorial, alto contraste, variable en opsz igual que aquella) y Hanken Grotesk a Montserrat (grotesca contemporánea, mejor rendimiento en texto médico denso). IBM Plex Mono se CONSERVA: la maqueta no define monoespaciada y las cifras, dosis y etiquetas del sistema la necesitan (tabular, distinguible). Caveat se conserva SOLO para las anotaciones de las ilustraciones a mano, que siguen siendo a mano. */ --pf-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --pf-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --pf-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --pf-hand: 'Caveat', cursive; /* SOLO decorativo, nunca texto en bloque */ --pf-w-regular: 400; --pf-w-medium: 500; --pf-w-semibold: 600; /* énfasis y H4 */ --pf-w-bold: 700; /* solo wordmark */ /* Prohibidos los pesos light. [diseño §4.3] */ /* ───────────────────────────────────────────────────────────── 9. TIPOGRAFÍA — escala [diseño §4.2] ───────────────────────────────────────────────────────────── Valores de escritorio. El bloque @media de abajo los reasigna para móvil; ningún componente vuelve a declarar un tamaño. */ /* [D-47] 03-08-2026: «como agrandamos el tamano del plugin y del texto? la parte de ADME en psicofarmacologia esta dificil de leer». Toda la escala sube un 18 %. Valores anteriores entre parentesis. Y hay un efecto de rebote que conviene ver: con la medida de lectura en 816 px [D-43], el cuerpo de 17 px daba ~90 caracteres por linea, once por encima de lo que pide el §4. A 20 px son ~78. Subir la letra no solo se lee mejor: ademas devuelve la linea a su sitio. */ --pf-fs-display: 66px; /* (56) portada */ --pf-fs-h1: 45px; --pf-fs-h2: 31px; --pf-fs-h3: 24px; --pf-fs-h4: 20px; /* SEMIBOLD y en sans — hoy son 13,5px = cuerpo */ --pf-fs-body: 20px; /* hoy 13,5px. La corrección de mayor impacto */ --pf-fs-small: 18px; /* metadatos, pies, notas */ --pf-fs-micro: 15px; /* etiquetas, badges, eyebrow */ --pf-fs-data: 19px; /* cifras y dosis, en mono */ --pf-fs-lead: 22px; /* párrafo de entrada de sección */ --pf-lh-body: 1.65; /* ≈28px. Unificado: las maquetas usaban 1,6 y 1,65 */ --pf-lh-tight: 1.22; /* títulos */ --pf-lh-data: 1.4; --pf-track-eyebrow: .14em; /* mayúsculas monoespaciadas con tracking amplio */ --pf-track-label: .09em; --pf-track-display: -.02em; /* ───────────────────────────────────────────────────────────── 10. ESPACIADO — escala de 4px [diseño §5.1] ───────────────────────────────────────────────────────────── SOLO estos valores. Los intermedios están prohibidos. */ --pf-s-1: 4px; --pf-s-2: 8px; --pf-s-3: 12px; --pf-s-4: 16px; --pf-s-6: 24px; --pf-s-8: 32px; --pf-s-12: 48px; --pf-s-16: 64px; --pf-s-24: 96px; /* ───────────────────────────────────────────────────────────── 11. CONTENEDORES Y FORMA [diseño §5.2] ───────────────────────────────────────────────────────────── */ /* [D-41] MEDIDA DE PAGINA. El ancho maximo de cualquier pagina del plugin, medido en el contenedor y no en la prosa. Encargo del autor el 03-08-2026: «centra todas las paginas del plugin, deja espacio a ambos lados para que los estudiantes y yo podamos hacer notas». Por eso NO es el ancho de lectura ni el de la ventana: es el ancho a partir del cual el resto de la pantalla es margen. */ /* [D-43] 03-08-2026: encargo del autor, «que el contenido del sitio ocupe 20 % mas espacio horizontal». Se escalan por 1,2 TODAS las medidas de contenedor, no solo la de pagina: si solo se ensanchara el contenedor, la prosa seguiria igual de estrecha y lo unico que creceria seria el vacio de dentro. Valores anteriores entre parentesis. */ --pf-w-page: 1296px; /* (1080) */ --pf-w-read: 816px; /* (680) columna de lectura. OJO: a 17px de cuerpo esto son ~90 caracteres por linea, por encima de los 65-75 que pide el documento de diseno. Es el precio del +20 % y esta aceptado; para revertir SOLO la prosa, volver a 680. */ --pf-w-sidebar: 1440px; /* contenido + TOC lateral */ --pf-w-index: 1536px; /* índice de dos paneles */ --pf-w-toc: 276px; --pf-w-panel: 468px; /* panel izquierdo del índice */ --pf-gutter-mobile: 24px; --pf-gutter-desktop: 48px; /* [D-110] Lenguaje de forma «preciso y profesional»: radios pequeños. La maqueta usa 0.25rem en UI funcional y 0.5rem en contenedores; nada «burbujeante». */ --pf-r-sm: 4px; /* botones y tarjetas pequeñas */ --pf-r-md: 8px; /* contenedores grandes */ --pf-r-lg: 8px; /* tarjeta de cabecera de ficha */ --pf-r-pill: 999px; /* chips */ /* Sombra: «ambiental», teñida del marino de marca, nunca negro puro. Solo para elementos flotantes (desplegables, modales); las tarjetas van con borde --pf-line y SIN sombra. [D-110] */ --pf-shadow: 0 4px 20px rgba(26,54,93,.05); --pf-shadow-pop: 0 8px 26px rgba(26,54,93,.12); /* ───────────────────────────────────────────────────────────── 12. ACCESIBILIDAD Y COMPORTAMIENTO [diseño §7 y §8] ───────────────────────────────────────────────────────────── */ --pf-tap: 44px; /* objetivo táctil mínimo. Hoy fallan 14 de 15 */ --pf-focus: 3px; /* grosor del anillo de foco visible */ --pf-sticky-top: 64px; /* altura del encabezado fijo */ --pf-scroll-margin: 130px; /* para que el ancla no quede bajo el encabezado */ /* Cortes responsive, como referencia documental (las @media no pueden usar var(); estos valores se repiten literalmente y solo aquí se documenta su origen). móvil <640 · tableta 640-1024 · escritorio >1024 */ --pf-bp-mobile: 640px; --pf-bp-tablet: 1024px; } /* ===================================================================== MAPA DE CLASE POR ATRIBUTO --------------------------------------------------------------------- Alternativa declarativa a PSF_Tokens::estilo_clase(), que emite un atributo style. Las dos formas hacen lo mismo; esta sirve para el marcado estático y para las plantillas que no pueden llamar a PHP. ===================================================================== */ [data-cls="isrs"] { --pf-cls:var(--pf-cls-isrs); --pf-cls-2:var(--pf-cls-isrs-2); --pf-cls-tx:var(--pf-cls-isrs-tx); } [data-cls="antipsicoticos"] { --pf-cls:var(--pf-cls-antipsicoticos); --pf-cls-2:var(--pf-cls-antipsicoticos-2); --pf-cls-tx:var(--pf-cls-antipsicoticos-tx); } [data-cls="adep-dual"] { --pf-cls:var(--pf-cls-adep-dual); --pf-cls-2:var(--pf-cls-adep-dual-2); --pf-cls-tx:var(--pf-cls-adep-dual-tx); } [data-cls="adep-multimodal"] { --pf-cls:var(--pf-cls-adep-multimodal); --pf-cls-2:var(--pf-cls-adep-multimodal-2); --pf-cls-tx:var(--pf-cls-adep-multimodal-tx); } [data-cls="adep-nadopa"] { --pf-cls:var(--pf-cls-adep-nadopa); --pf-cls-2:var(--pf-cls-adep-nadopa-2); --pf-cls-tx:var(--pf-cls-adep-nadopa-tx); } [data-cls="adep-melatonina"] { --pf-cls:var(--pf-cls-adep-melatonina); --pf-cls-2:var(--pf-cls-adep-melatonina-2); --pf-cls-tx:var(--pf-cls-adep-melatonina-tx); } [data-cls="adep-nmda"] { --pf-cls:var(--pf-cls-adep-nmda); --pf-cls-2:var(--pf-cls-adep-nmda-2); --pf-cls-tx:var(--pf-cls-adep-nmda-tx); } [data-cls="triciclicos"] { --pf-cls:var(--pf-cls-triciclicos); --pf-cls-2:var(--pf-cls-triciclicos-2); --pf-cls-tx:var(--pf-cls-triciclicos-tx); } [data-cls="vmat2"] { --pf-cls:var(--pf-cls-vmat2); --pf-cls-2:var(--pf-cls-vmat2-2); --pf-cls-tx:var(--pf-cls-vmat2-tx); } [data-cls="psicoestimulantes"] { --pf-cls:var(--pf-cls-psicoestimulantes); --pf-cls-2:var(--pf-cls-psicoestimulantes-2); --pf-cls-tx:var(--pf-cls-psicoestimulantes-tx); } [data-cls="benzodiacepinas"] { --pf-cls:var(--pf-cls-benzodiacepinas); --pf-cls-2:var(--pf-cls-benzodiacepinas-2); --pf-cls-tx:var(--pf-cls-benzodiacepinas-tx); } [data-cls="otros"] { --pf-cls:var(--pf-cls-otros); --pf-cls-2:var(--pf-cls-otros-2); --pf-cls-tx:var(--pf-cls-otros-tx); } [data-area="principios"] { --pf-cls:var(--pf-cat-principios); --pf-cls-tx:var(--pf-cat-principios-tx); } [data-area="farmacos"] { --pf-cls:var(--pf-cat-farmacos); --pf-cls-tx:var(--pf-cat-farmacos-tx); } [data-area="diagnosticos"] { --pf-cls:var(--pf-cat-diagnosticos); --pf-cls-tx:var(--pf-cat-diagnosticos-tx); } [data-area="sobremi"] { --pf-cls:var(--pf-cat-sobremi); --pf-cls-tx:var(--pf-cat-sobremi-tx); } /* ===================================================================== PUENTE DE COMPATIBILIDAD [D-11] --------------------------------------------------------------------- El sitio tenía CINCO paletas paralelas que no compartían una sola variable: --psf-* (ficha y diagnóstico), --ar-* (archivo), --in-* (nemotecnias), --pr-* (práctica) y las sueltas de portada, principios y «Sobre mí». Por eso la ficha parecía de otro sitio distinto que la portada: usaba blanco, gris azulado y un azul #2563EB que no existe en ninguna otra página. Reescribir las diez hojas de estilo de golpe rompería todo antes del paso 4. En vez de eso, aquí se redefinen las variables antiguas en términos de los tokens nuevos: cada módulo sigue funcionando con los nombres que ya usa y sin embargo bebe de una sola paleta. Efecto inmediato: las 50 fichas ya publicadas entran hoy en el sistema, sin tocar el render. Este bloque se retira en el paso 5, cuando cada módulo consuma los tokens directamente. Mientras exista, es el ÚNICO sitio donde puede aparecer un nombre de variable antiguo. ===================================================================== */ /* --- Ficha de fármaco y página de diagnóstico (--psf-*) -------------- */ .psf-ficha, .psf-dx{ --psf-bg: var(--pf-surface); --psf-surface: var(--pf-paper-alt); --psf-border: var(--pf-line); --psf-text: var(--pf-ink); --psf-muted: var(--pf-ink-soft); --psf-accent: var(--pf-cls); --psf-accent-bg: color-mix(in srgb, var(--pf-cls) 12%, var(--pf-surface)); --psf-green: var(--pf-ok-tx); --psf-green-bg: var(--pf-ok-tint); --psf-green-bd: color-mix(in srgb, var(--pf-ok) 45%, var(--pf-surface)); --psf-amber: var(--pf-warn-tx); --psf-amber-bg: var(--pf-warn-tint); --psf-amber-bd: color-mix(in srgb, var(--pf-warn) 45%, var(--pf-surface)); --psf-red: var(--pf-danger-tx); --psf-radius: var(--pf-r-md); } /* --- Archivo de fármacos y de diagnósticos (--ar-*) ------------------ */ .psf-arch{ --ar-tinta: var(--pf-ink); --ar-papel: var(--pf-paper); --ar-papel-2: var(--pf-paper-alt); --ar-linea: var(--pf-line); --ar-muted: var(--pf-ink-soft); --ar-acento: var(--pf-cls); --ar-acento-2: var(--pf-cls-2); } /* Las carpetas ya traen [data-acento]: se reasignan a la paleta única. */ .psf-carpeta[data-acento="isrs"] { --ar-acento:var(--pf-cls-isrs); --ar-acento-2:var(--pf-cls-isrs-2); --pf-cls:var(--pf-cls-isrs); --pf-cls-tx:var(--pf-cls-isrs-tx); } .psf-carpeta[data-acento="ap"] { --ar-acento:var(--pf-cls-antipsicoticos); --ar-acento-2:var(--pf-cls-antipsicoticos-2); --pf-cls:var(--pf-cls-antipsicoticos); --pf-cls-tx:var(--pf-cls-antipsicoticos-tx); } .psf-carpeta[data-acento="adep"], .psf-carpeta[data-acento="adepdual"] { --ar-acento:var(--pf-cls-adep-dual); --ar-acento-2:var(--pf-cls-adep-dual-2); --pf-cls:var(--pf-cls-adep-dual); --pf-cls-tx:var(--pf-cls-adep-dual-tx); } .psf-carpeta[data-acento="adepmulti"] { --ar-acento:var(--pf-cls-adep-multimodal); --ar-acento-2:var(--pf-cls-adep-multimodal-2); --pf-cls:var(--pf-cls-adep-multimodal); --pf-cls-tx:var(--pf-cls-adep-multimodal-tx); } .psf-carpeta[data-acento="adepnadopa"] { --ar-acento:var(--pf-cls-adep-nadopa); --ar-acento-2:var(--pf-cls-adep-nadopa-2); --pf-cls:var(--pf-cls-adep-nadopa); --pf-cls-tx:var(--pf-cls-adep-nadopa-tx); } .psf-carpeta[data-acento="adepmelato"] { --ar-acento:var(--pf-cls-adep-melatonina); --ar-acento-2:var(--pf-cls-adep-melatonina-2); --pf-cls:var(--pf-cls-adep-melatonina); --pf-cls-tx:var(--pf-cls-adep-melatonina-tx); } .psf-carpeta[data-acento="adepnmda"] { --ar-acento:var(--pf-cls-adep-nmda); --ar-acento-2:var(--pf-cls-adep-nmda-2); --pf-cls:var(--pf-cls-adep-nmda); --pf-cls-tx:var(--pf-cls-adep-nmda-tx); } .psf-carpeta[data-acento="tca"] { --ar-acento:var(--pf-cls-triciclicos); --ar-acento-2:var(--pf-cls-triciclicos-2); --pf-cls:var(--pf-cls-triciclicos); --pf-cls-tx:var(--pf-cls-triciclicos-tx); } .psf-carpeta[data-acento="vmat2"] { --ar-acento:var(--pf-cls-vmat2); --ar-acento-2:var(--pf-cls-vmat2-2); --pf-cls:var(--pf-cls-vmat2); --pf-cls-tx:var(--pf-cls-vmat2-tx); } .psf-carpeta[data-acento="estim"] { --ar-acento:var(--pf-cls-psicoestimulantes); --ar-acento-2:var(--pf-cls-psicoestimulantes-2); --pf-cls:var(--pf-cls-psicoestimulantes); --pf-cls-tx:var(--pf-cls-psicoestimulantes-tx); } .psf-carpeta[data-acento="bzd"] { --ar-acento:var(--pf-cls-benzodiacepinas); --ar-acento-2:var(--pf-cls-benzodiacepinas-2); --pf-cls:var(--pf-cls-benzodiacepinas); --pf-cls-tx:var(--pf-cls-benzodiacepinas-tx); } .psf-carpeta[data-acento="otros"] { --ar-acento:var(--pf-cls-otros); --ar-acento-2:var(--pf-cls-otros-2); --pf-cls:var(--pf-cls-otros); --pf-cls-tx:var(--pf-cls-otros-tx); } /* [D-56] LO MISMO PARA LA VISTA DE GRUPO. La hoja psf-overview.css solo reasignaba --ar-acento en .psf-ov[data-acento], no --pf-cls ni --pf-cls-tx, y esos dos siguen valiendo el color del ÁREA (terracota de Fármacos) porque :root los define. Todo lo que se pinta con --pf-cls-tx —el contador del grupo, las iniciales de la mnemotecnia— salía terracota en las once páginas de grupo en vez del color de su clase. Se ve en cuanto se compara el icono de carpeta (verde, --ar-acento) con el contador de al lado. */ .psf-ov[data-acento="isrs"] { --ar-acento:var(--pf-cls-isrs); --ar-acento-2:var(--pf-cls-isrs-2); --pf-cls:var(--pf-cls-isrs); --pf-cls-2:var(--pf-cls-isrs-2); --pf-cls-tx:var(--pf-cls-isrs-tx); } .psf-ov[data-acento="ap"] { --ar-acento:var(--pf-cls-antipsicoticos); --ar-acento-2:var(--pf-cls-antipsicoticos-2); --pf-cls:var(--pf-cls-antipsicoticos); --pf-cls-2:var(--pf-cls-antipsicoticos-2); --pf-cls-tx:var(--pf-cls-antipsicoticos-tx); } .psf-ov[data-acento="adep"] { --ar-acento:var(--pf-cls-adep-dual); --ar-acento-2:var(--pf-cls-adep-dual-2); --pf-cls:var(--pf-cls-adep-dual); --pf-cls-2:var(--pf-cls-adep-dual-2); --pf-cls-tx:var(--pf-cls-adep-dual-tx); } .psf-ov[data-acento="adepdual"] { --ar-acento:var(--pf-cls-adep-dual); --ar-acento-2:var(--pf-cls-adep-dual-2); --pf-cls:var(--pf-cls-adep-dual); --pf-cls-2:var(--pf-cls-adep-dual-2); --pf-cls-tx:var(--pf-cls-adep-dual-tx); } .psf-ov[data-acento="adepmulti"] { --ar-acento:var(--pf-cls-adep-multimodal); --ar-acento-2:var(--pf-cls-adep-multimodal-2); --pf-cls:var(--pf-cls-adep-multimodal); --pf-cls-2:var(--pf-cls-adep-multimodal-2); --pf-cls-tx:var(--pf-cls-adep-multimodal-tx); } .psf-ov[data-acento="adepnadopa"] { --ar-acento:var(--pf-cls-adep-nadopa); --ar-acento-2:var(--pf-cls-adep-nadopa-2); --pf-cls:var(--pf-cls-adep-nadopa); --pf-cls-2:var(--pf-cls-adep-nadopa-2); --pf-cls-tx:var(--pf-cls-adep-nadopa-tx); } .psf-ov[data-acento="adepmelato"] { --ar-acento:var(--pf-cls-adep-melatonina); --ar-acento-2:var(--pf-cls-adep-melatonina-2); --pf-cls:var(--pf-cls-adep-melatonina); --pf-cls-2:var(--pf-cls-adep-melatonina-2); --pf-cls-tx:var(--pf-cls-adep-melatonina-tx); } .psf-ov[data-acento="adepnmda"] { --ar-acento:var(--pf-cls-adep-nmda); --ar-acento-2:var(--pf-cls-adep-nmda-2); --pf-cls:var(--pf-cls-adep-nmda); --pf-cls-2:var(--pf-cls-adep-nmda-2); --pf-cls-tx:var(--pf-cls-adep-nmda-tx); } .psf-ov[data-acento="tca"] { --ar-acento:var(--pf-cls-triciclicos); --ar-acento-2:var(--pf-cls-triciclicos-2); --pf-cls:var(--pf-cls-triciclicos); --pf-cls-2:var(--pf-cls-triciclicos-2); --pf-cls-tx:var(--pf-cls-triciclicos-tx); } .psf-ov[data-acento="vmat2"] { --ar-acento:var(--pf-cls-vmat2); --ar-acento-2:var(--pf-cls-vmat2-2); --pf-cls:var(--pf-cls-vmat2); --pf-cls-2:var(--pf-cls-vmat2-2); --pf-cls-tx:var(--pf-cls-vmat2-tx); } .psf-ov[data-acento="estim"] { --ar-acento:var(--pf-cls-psicoestimulantes); --ar-acento-2:var(--pf-cls-psicoestimulantes-2); --pf-cls:var(--pf-cls-psicoestimulantes); --pf-cls-2:var(--pf-cls-psicoestimulantes-2); --pf-cls-tx:var(--pf-cls-psicoestimulantes-tx); } .psf-ov[data-acento="bzd"] { --ar-acento:var(--pf-cls-benzodiacepinas); --ar-acento-2:var(--pf-cls-benzodiacepinas-2); --pf-cls:var(--pf-cls-benzodiacepinas); --pf-cls-2:var(--pf-cls-benzodiacepinas-2); --pf-cls-tx:var(--pf-cls-benzodiacepinas-tx); } .psf-ov[data-acento="otros"] { --ar-acento:var(--pf-cls-otros); --ar-acento-2:var(--pf-cls-otros-2); --pf-cls:var(--pf-cls-otros); --pf-cls-2:var(--pf-cls-otros-2); --pf-cls-tx:var(--pf-cls-otros-tx); } /* --- Nemotecnias (--in-*) ------------------------------------------- */ .psf-intro{ --in-tinta: var(--pf-ink); --in-papel: var(--pf-paper); --in-linea: var(--pf-line); --in-muted: var(--pf-ink-soft); --in-acento: var(--pf-cls); --in-acento-2: var(--pf-cls-2); } .psf-intro-grupo[data-acento="isrs"]{ --in-acento:var(--pf-cls-isrs); --in-acento-2:var(--pf-cls-isrs-2); } .psf-intro-grupo[data-acento="d2"] { --in-acento:var(--pf-cls-adep-nadopa); --in-acento-2:var(--pf-cls-adep-nadopa-2); } .psf-intro-grupo[data-acento="sga"] { --in-acento:var(--pf-cls-antipsicoticos); --in-acento-2:var(--pf-cls-antipsicoticos-2); } .psf-intro-grupo[data-acento="bzd"] { --in-acento:var(--pf-cls-benzodiacepinas); --in-acento-2:var(--pf-cls-benzodiacepinas-2); } /* --- Módulo de práctica (--pr-*) ------------------------------------ */ .psf-practica{ --pr-tinta: var(--pf-ink); --pr-papel: var(--pf-paper); --pr-papel-2: var(--pf-paper-alt); --pr-linea: var(--pf-line); --pr-muted: var(--pf-ink-soft); --pr-ok: var(--pf-ok-tx); --pr-ok-bg: var(--pf-ok-tint); --pr-mal: var(--pf-danger-tx); --pr-mal-bg: var(--pf-danger-tint); --pr-acento: var(--pf-cls); --pr-acento-2: var(--pf-cls-2); /* --pr-xp y --pr-racha se dejan como están: son señales de juego, no de evidencia, y aislarlas evita que se confundan con un color semántico. */ } .psf-practica[data-acento="isrs"]{ --pr-acento:var(--pf-cls-isrs); --pr-acento-2:var(--pf-cls-isrs-2); } .psf-practica[data-acento="d2"] { --pr-acento:var(--pf-cls-antipsicoticos); --pr-acento-2:var(--pf-cls-antipsicoticos-2); } /* --- Portada y Principios básicos ----------------------------------- */ .psf-portada, .psf-pb{ --tinta: var(--pf-ink); --papel: var(--pf-paper); --papel2: var(--pf-paper-alt); --linea: var(--pf-line); --sub: var(--pf-ink-soft); --muted: var(--pf-ink-soft); --acento: var(--pf-cat-principios); --calido: var(--pf-brand-tx); --ok: var(--pf-ok-tx); --mid: var(--pf-warn-tx); --bad: var(--pf-danger-tx); } /* --- «Sobre mí» (--smpf-*) ------------------------------------------ Era la única pieza con tipografías propias (Lora + Inter) y una paleta azul verdosa sin relación con el resto. Entra en el sistema. */ .smpf{ --smpf-accent: var(--pf-cat-sobremi); --smpf-accent-soft: var(--pf-ok-tint); --smpf-ink: var(--pf-ink); --smpf-muted: var(--pf-ink-soft); --smpf-paper: var(--pf-paper); --smpf-line: var(--pf-line); --smpf-max: var(--pf-w-sidebar); --smpf-serif: var(--pf-serif); --smpf-sans: var(--pf-sans); } /* ===================================================================== MÓVIL — reasignación de la escala tipográfica [diseño §4.2, §7] Cuerpo mínimo de 16px para evitar el zoom automático de iOS. ===================================================================== */ @media (max-width: 760px){ :root{ --pf-fs-display: 36px; --pf-fs-h1: 30px; --pf-fs-h2: 22px; --pf-fs-h3: 18px; --pf-fs-h4: 16px; --pf-fs-body: 16px; --pf-fs-small: 14px; --pf-fs-micro: 12px; --pf-fs-data: 15px; --pf-fs-lead: 17px; --pf-sticky-top: 56px; } } /* ===================================================================== MODO OSCURO — fase 2, opcional [diseño §3.5] Se invierten --ink y --paper conservando los roles. Los colores de área, de clase y semánticos NO se invierten: solo se aclaran lo justo para mantener el contraste AA sobre fondo oscuro. Desactivado hasta que el autor lo pida. ===================================================================== */ /* @media (prefers-color-scheme: dark){ :root[data-psf-oscuro]{ … } } */ /* ===================================================================== MOVIMIENTO REDUCIDO [diseño §8] ===================================================================== */ @media (prefers-reduced-motion: reduce){ :root{ --pf-anim: none; } *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }