/* ========================================================================= Fundación Psicólogos Unidos Colombia — tokens de diseño (Material 3) ------------------------------------------------------------------------- Referencia de diseño: Material 3 (M3) con la actualización Material 3 Expressive (https://m3.material.io/). Nombres de tokens como los de material-web (--md-ref-*, --md-sys-*), que no se carga: el sitio es CSS puro. Contraste: WCAG 2.2 AA (ver herramientas/verificar-contraste.mjs). ------------------------------------------------------------------------- Este archivo define TODOS los valores de diseño del sitio: colores, tipografía, forma (radios), elevación (sombras), capas de estado y movimiento. styles.css solo usa estas variables; no escribe valores a mano. Se carga antes que styles.css en todas las páginas. Capas (de la más general a la más concreta): 1. Colores de la marca (--pu-marca-*) y roles de color M3 (--md-sys-color-*). GENERADOS: no se editan a mano. Para cambiarlos, edita herramientas/generar-paleta.mjs y ejecuta: cd herramientas && npm install && npm run paleta 2. Escala tipográfica M3 (--md-sys-typescale-*). 3. Forma (--md-sys-shape-*), elevación (--md-sys-elevation-*), capas de estado (--md-sys-state-*) y movimiento (--md-sys-motion-*). 4. Tokens de componente (--pu-comp-*): qué rol M3 usa cada parte del sitio. Es el lugar para cambiar, por ejemplo, el color del pie de página. 5. Espaciado, rejilla y anchos (--pu-espacio-*, --pu-rejilla-*, --pu-area-tactil, --pu-ancho-*). Aquí las variables se agrupan por rol (como en la documentación de M3) y no en orden alfabético. ========================================================================= */ /* 1. Color ------------------------------------------------------------- */ /* INICIO COLORES GENERADOS ------------------------------------------------ No edites estos valores a mano: salen de herramientas/generar-paleta.mjs (cd herramientas && npm run paleta). Material 3, variante Fidelity, contraste estándar. Fuentes: primario #045954 (semilla), secundario #c4dfbe, terciario #9389c1, neutro: matiz de #2a255c con croma 8 y 12. Ajuste de marca: en claro, primary = #045954 (Fidelity daba #00403c). */ :root { /* Colores exactos del manual de marca (iguales en claro y oscuro) */ --pu-marca-verde: #045954; --pu-marca-lavanda: #9389c1; --pu-marca-azul-noche: #2a255c; --pu-marca-amarillo: #f5d600; --pu-marca-turquesa: #00b4b1; --pu-marca-menta: #c4dfbe; --pu-marca-azul-claro: #92bae3; --pu-marca-coral: #ec6c4a; --pu-marca-blanco: #fff; /* Roles de color M3, esquema claro */ --md-sys-color-primary: #045954; --md-sys-color-on-primary: #fff; --md-sys-color-primary-container: #045954; --md-sys-color-on-primary-container: #89cdc7; --md-sys-color-inverse-primary: #8fd3cc; --md-sys-color-secondary: #4d644a; --md-sys-color-on-secondary: #fff; --md-sys-color-secondary-container: #cce7c6; --md-sys-color-on-secondary-container: #51694e; --md-sys-color-tertiary: #3a3163; --md-sys-color-on-tertiary: #fff; --md-sys-color-tertiary-container: #51487b; --md-sys-color-on-tertiary-container: #c5baf5; --md-sys-color-error: #ba1a1a; --md-sys-color-on-error: #fff; --md-sys-color-error-container: #ffdad6; --md-sys-color-on-error-container: #93000a; --md-sys-color-background: #fcf8ff; --md-sys-color-on-background: #1c1b23; --md-sys-color-surface: #fcf8ff; --md-sys-color-on-surface: #1c1b23; --md-sys-color-surface-variant: #e4e0f2; --md-sys-color-on-surface-variant: #474554; --md-sys-color-surface-dim: #dcd8e3; --md-sys-color-surface-bright: #fcf8ff; --md-sys-color-surface-container-lowest: #fff; --md-sys-color-surface-container-low: #f6f2fd; --md-sys-color-surface-container: #f0ecf7; --md-sys-color-surface-container-high: #ebe6f2; --md-sys-color-surface-container-highest: #e5e1ec; --md-sys-color-inverse-surface: #312f38; --md-sys-color-inverse-on-surface: #f3effa; --md-sys-color-outline: #787585; --md-sys-color-outline-variant: #c8c4d6; --md-sys-color-shadow: #000; --md-sys-color-scrim: #000; --md-sys-color-surface-tint: #045954; --md-sys-color-primary-fixed: #aaefe8; --md-sys-color-primary-fixed-dim: #8fd3cc; --md-sys-color-on-primary-fixed: #00201e; --md-sys-color-on-primary-fixed-variant: #00504b; --md-sys-color-secondary-fixed: #cfeac9; --md-sys-color-secondary-fixed-dim: #b3ceae; --md-sys-color-on-secondary-fixed: #0a200b; --md-sys-color-on-secondary-fixed-variant: #364c34; --md-sys-color-tertiary-fixed: #e6deff; --md-sys-color-tertiary-fixed-dim: #cabffa; --md-sys-color-on-tertiary-fixed: #1c1344; --md-sys-color-on-tertiary-fixed-variant: #484072; } /* Roles de color M3, esquema oscuro. Se aplica en pantalla (al imprimir se usa el claro) cuando el sistema está en oscuro y la persona no eligió «Claro» en el pie, o cuando eligió «Oscuro» (atributo data-esquema en , ver docs/js/apariencia.js). Los dos bloques tienen los mismos valores. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-esquema="claro"]) { --md-sys-color-primary: #8fd3cc; --md-sys-color-on-primary: #003734; --md-sys-color-primary-container: #045954; --md-sys-color-on-primary-container: #89cdc7; --md-sys-color-inverse-primary: #206963; --md-sys-color-secondary: #b3ceae; --md-sys-color-on-secondary: #20351f; --md-sys-color-secondary-container: #384f36; --md-sys-color-on-secondary-container: #a5c0a0; --md-sys-color-tertiary: #cabffa; --md-sys-color-on-tertiary: #32295a; --md-sys-color-tertiary-container: #51487b; --md-sys-color-on-tertiary-container: #c5baf5; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #13121a; --md-sys-color-on-background: #e5e1ec; --md-sys-color-surface: #13121a; --md-sys-color-on-surface: #e5e1ec; --md-sys-color-surface-variant: #474554; --md-sys-color-on-surface-variant: #c8c4d6; --md-sys-color-surface-dim: #13121a; --md-sys-color-surface-bright: #3a3841; --md-sys-color-surface-container-lowest: #0e0d15; --md-sys-color-surface-container-low: #1c1b23; --md-sys-color-surface-container: #201f27; --md-sys-color-surface-container-high: #2a2931; --md-sys-color-surface-container-highest: #35343c; --md-sys-color-inverse-surface: #e5e1ec; --md-sys-color-inverse-on-surface: #312f38; --md-sys-color-outline: #928f9f; --md-sys-color-outline-variant: #474554; --md-sys-color-shadow: #000; --md-sys-color-scrim: #000; --md-sys-color-surface-tint: #8fd3cc; --md-sys-color-primary-fixed: #aaefe8; --md-sys-color-primary-fixed-dim: #8fd3cc; --md-sys-color-on-primary-fixed: #00201e; --md-sys-color-on-primary-fixed-variant: #00504b; --md-sys-color-secondary-fixed: #cfeac9; --md-sys-color-secondary-fixed-dim: #b3ceae; --md-sys-color-on-secondary-fixed: #0a200b; --md-sys-color-on-secondary-fixed-variant: #364c34; --md-sys-color-tertiary-fixed: #e6deff; --md-sys-color-tertiary-fixed-dim: #cabffa; --md-sys-color-on-tertiary-fixed: #1c1344; --md-sys-color-on-tertiary-fixed-variant: #484072; } } @media screen { :root[data-esquema="oscuro"] { --md-sys-color-primary: #8fd3cc; --md-sys-color-on-primary: #003734; --md-sys-color-primary-container: #045954; --md-sys-color-on-primary-container: #89cdc7; --md-sys-color-inverse-primary: #206963; --md-sys-color-secondary: #b3ceae; --md-sys-color-on-secondary: #20351f; --md-sys-color-secondary-container: #384f36; --md-sys-color-on-secondary-container: #a5c0a0; --md-sys-color-tertiary: #cabffa; --md-sys-color-on-tertiary: #32295a; --md-sys-color-tertiary-container: #51487b; --md-sys-color-on-tertiary-container: #c5baf5; --md-sys-color-error: #ffb4ab; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000a; --md-sys-color-on-error-container: #ffdad6; --md-sys-color-background: #13121a; --md-sys-color-on-background: #e5e1ec; --md-sys-color-surface: #13121a; --md-sys-color-on-surface: #e5e1ec; --md-sys-color-surface-variant: #474554; --md-sys-color-on-surface-variant: #c8c4d6; --md-sys-color-surface-dim: #13121a; --md-sys-color-surface-bright: #3a3841; --md-sys-color-surface-container-lowest: #0e0d15; --md-sys-color-surface-container-low: #1c1b23; --md-sys-color-surface-container: #201f27; --md-sys-color-surface-container-high: #2a2931; --md-sys-color-surface-container-highest: #35343c; --md-sys-color-inverse-surface: #e5e1ec; --md-sys-color-inverse-on-surface: #312f38; --md-sys-color-outline: #928f9f; --md-sys-color-outline-variant: #474554; --md-sys-color-shadow: #000; --md-sys-color-scrim: #000; --md-sys-color-surface-tint: #8fd3cc; --md-sys-color-primary-fixed: #aaefe8; --md-sys-color-primary-fixed-dim: #8fd3cc; --md-sys-color-on-primary-fixed: #00201e; --md-sys-color-on-primary-fixed-variant: #00504b; --md-sys-color-secondary-fixed: #cfeac9; --md-sys-color-secondary-fixed-dim: #b3ceae; --md-sys-color-on-secondary-fixed: #0a200b; --md-sys-color-on-secondary-fixed-variant: #364c34; --md-sys-color-tertiary-fixed: #e6deff; --md-sys-color-tertiary-fixed-dim: #cabffa; --md-sys-color-on-tertiary-fixed: #1c1344; --md-sys-color-on-tertiary-fixed-variant: #484072; } } /* FIN COLORES GENERADOS --------------------------------------------------- */ /* 2. Tipografía -------------------------------------------------------- */ /* Escala tipográfica de M3 con la fuente del sitio, Nunito (solo se cargan los pesos 400 y 700; ver styles.css, «Fuentes»). Los tamaños con clamp() crecen suavemente entre celular y escritorio (360 a 1280 px), como en el sitio anterior, para no cambiar la jerarquía visual. Donde M3 tiene otro valor, se indica entre corchetes. Rol M3 Tamaño en el sitio Dónde se usa display-* 57 / 45 / 36 px [= M3] (reservado; el sitio no lo usa) headline-large 32 → 56 px [M3: 32] h1 headline-medium 24 → 30 px [M3: 28] h2 de las secciones de texto en escritorio headline-small 24 → 36 px [M3: 24] h2 title-large 20 → 24 px [M3: 22] h3 title-medium 18 → 21 px [M3: 16] h4, texto de entrada, artículos del blog title-small 14 px [= M3] (reservado) body-large 16 → 18 px [M3: 16] texto general, botones body-medium 14 → 15 px [M3: 14] texto secundario, pie de página body-small 12 px [= M3] (reservado: es pequeño para este público) label-large 14 → 15 px [M3: 14] menú de escritorio, etiquetas label-medium/small 12 / 11 px [= M3] (reservado) Pesos: los títulos y etiquetas van en negrita (700), como pide el manual de marca; M3 usa 400 o 500, pero Nunito 500 no se carga. Espaciado entre letras (tracking): 0 en todos los roles; los valores de M3 son para Roboto y abrirían demasiado Nunito. */ :root { --md-ref-typeface-brand: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif; --md-ref-typeface-plain: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif; --md-ref-typeface-weight-regular: 400; --md-ref-typeface-weight-bold: 700; --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-large-size: 3.5625rem; --md-sys-typescale-display-large-line-height: 1.12; --md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-display-large-tracking: 0; --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-medium-size: 2.8125rem; --md-sys-typescale-display-medium-line-height: 1.16; --md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-display-medium-tracking: 0; --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand); --md-sys-typescale-display-small-size: 2.25rem; --md-sys-typescale-display-small-line-height: 1.22; --md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-display-small-tracking: 0; --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-large-size: clamp(2rem, 1.6rem + 2vw, 3.5rem); --md-sys-typescale-headline-large-line-height: 1.2; --md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-headline-large-tracking: 0; --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-medium-size: clamp(1.5rem, 1.1rem + 0.8vw, 1.875rem); --md-sys-typescale-headline-medium-line-height: 1.2; --md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-headline-medium-tracking: 0; --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand); --md-sys-typescale-headline-small-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem); --md-sys-typescale-headline-small-line-height: 1.2; --md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-headline-small-tracking: 0; --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand); --md-sys-typescale-title-large-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); --md-sys-typescale-title-large-line-height: 1.2; --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-title-large-tracking: 0; --md-sys-typescale-title-medium-font: var(--md-ref-typeface-brand); --md-sys-typescale-title-medium-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --md-sys-typescale-title-medium-line-height: 1.5; --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-regular); --md-sys-typescale-title-medium-tracking: 0; --md-sys-typescale-title-small-font: var(--md-ref-typeface-brand); --md-sys-typescale-title-small-size: 0.875rem; --md-sys-typescale-title-small-line-height: 1.43; --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-title-small-tracking: 0; --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-large-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --md-sys-typescale-body-large-line-height: 1.6; --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular); --md-sys-typescale-body-large-tracking: 0; --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-medium-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); --md-sys-typescale-body-medium-line-height: 1.5; --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular); --md-sys-typescale-body-medium-tracking: 0; --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-body-small-size: 0.75rem; --md-sys-typescale-body-small-line-height: 1.33; --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular); --md-sys-typescale-body-small-tracking: 0; --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-large-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); --md-sys-typescale-label-large-line-height: 1.43; --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-label-large-tracking: 0; --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-medium-size: 0.75rem; --md-sys-typescale-label-medium-line-height: 1.33; --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-label-medium-tracking: 0; --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain); --md-sys-typescale-label-small-size: 0.6875rem; --md-sys-typescale-label-small-line-height: 1.45; --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-bold); --md-sys-typescale-label-small-tracking: 0; } /* 3. Forma, elevación, estados y movimiento ---------------------------- */ :root { /* Forma: escala de esquinas de M3. Cada radio anterior del sitio se llevó al paso de M3 más cercano: 12 px → medium, 20 px → large (16 px), 8 y 6 px → small, 4 px → extra-small, círculos → full. */ --md-sys-shape-corner-none: 0; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 9999px; /* Elevación: sombras de M3 (sombra clave + sombra ambiental) con el rol shadow. En oscuro M3 indica la elevación sobre todo con el tono de la superficie (surface-container-*), y la sombra se nota menos. */ --md-sys-elevation-level0: none; --md-sys-elevation-level1: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 1px 3px 1px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent); --md-sys-elevation-level2: 0 1px 2px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 2px 6px 2px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent); --md-sys-elevation-level3: 0 1px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 4px 8px 3px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent); --md-sys-elevation-level4: 0 2px 3px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 6px 10px 4px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent); --md-sys-elevation-level5: 0 4px 4px 0 color-mix(in srgb, var(--md-sys-color-shadow) 30%, transparent), 0 8px 12px 6px color-mix(in srgb, var(--md-sys-color-shadow) 15%, transparent); /* Capas de estado: opacidad del color del contenido (currentcolor) que se superpone al fondo de un elemento interactivo. Valores de M3 (0,08, 0,1, 0,1 y 0,16) escritos como porcentaje, que CSS acepta igual y que se usa directo en color-mix(). */ --md-sys-state-hover-state-layer-opacity: 8%; --md-sys-state-focus-state-layer-opacity: 10%; --md-sys-state-pressed-state-layer-opacity: 10%; --md-sys-state-dragged-state-layer-opacity: 16%; /* Movimiento: mínimo y sin rebotes. Con «reducir movimiento» activado, la duración baja a casi cero (bloque siguiente). */ --md-sys-motion-duration-short4: 200ms; --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); } /* Movimiento reducido: si la persona lo pide en su sistema, las transiciones duran casi cero (0,01 ms y no 0, para que los eventos transitionend sigan llegando) */ @media (prefers-reduced-motion: reduce) { :root { --md-sys-motion-duration-short4: 0.01ms; } } /* 4. Tokens de componente ---------------------------------------------- */ /* Qué rol de M3 usa cada parte del sitio. Para cambiar, por ejemplo, el color del pie de página, cambia aquí el rol asignado a --pu-comp-pie-*: así se ajusta solo en claro y en oscuro. */ :root { /* El sitio tiene esquema claro y oscuro: por omisión sigue la preferencia del sistema; la persona puede fijar uno en el pie («Apariencia») */ color-scheme: light dark; /* Página y texto */ /* Fondo de la página: blanco en claro (surface-container-lowest), para que el tinte lavanda quede solo en las franjas alternas y la portada. En oscuro sigue siendo surface (ver los bloques oscuros). Para volver al fondo anterior: var(--md-sys-color-surface). */ --pu-comp-pagina-fondo: var(--md-sys-color-surface-container-lowest); /* Texto general: azul noche del manual en claro (decisión de la Fundación, noviembre de 2026); en oscuro, on-surface (ver el bloque oscuro) */ --pu-comp-pagina-texto: var(--pu-marca-azul-noche); --pu-comp-titulos: var(--md-sys-color-primary); --pu-comp-enlace: var(--md-sys-color-primary); --pu-comp-borde: var(--md-sys-color-outline-variant); /* Indicador de foco del teclado: azul noche sobre fondos claros, como el texto (decisión de la Fundación, noviembre de 2026); en oscuro, on-surface (ver el bloque oscuro). Dentro de bloques de color (pie, franja de confianza, llamadas), amarillo de la marca. */ --pu-comp-foco: var(--pu-marca-azul-noche); --pu-comp-foco-sobre-color: var(--pu-marca-amarillo); /* Barra superior (logo y menú): blanca en claro (surface-container-lowest), para que no se vea lila en pantallas sin tono cálido. La página actual del menú lleva el indicador activo de M3 (secondary-container, menta). Para volver a la barra anterior: --pu-comp-encabezado-fondo: var(--pu-comp-pagina-fondo) y --pu-comp-nav-actual-fondo: var(--md-sys-color-surface-container). */ --pu-comp-encabezado-fondo: var(--md-sys-color-surface-container-lowest); --pu-comp-nav-actual-fondo: var(--md-sys-color-secondary-container); /* Fondos de sección y tarjetas */ --pu-comp-seccion-alterna-fondo: var(--md-sys-color-surface-container); /* Portada (bloque principal de cada página): surface-container-low, un paso más claro que las secciones alternas y con la mitad de tinte lila. En oscuro coincide con las secciones alternas, como antes. Para volver a la portada anterior: var(--pu-comp-seccion-alterna-fondo). */ --pu-comp-portada-fondo: var(--md-sys-color-surface-container-low); --pu-comp-tarjeta-fondo: var(--md-sys-color-surface-container-lowest); /* Tarjetas: radio medium (12 px), el que M3 indica para tarjetas (decisión de la Fundación, noviembre de 2026). Antes: large, 16 px. */ --pu-comp-tarjeta-forma: var(--md-sys-shape-corner-medium); --pu-comp-tarjeta-elevacion: var(--md-sys-elevation-level1); --pu-comp-tarjeta-elevacion-hover: var(--md-sys-elevation-level2); /* Botones: forma de píldora («full»), la de M3 Expressive (decisión de la Fundación, noviembre de 2026). Antes: medium, 12 px. */ --pu-comp-boton-forma: var(--md-sys-shape-corner-full); /* Bloques destacados: franja de confianza y llamadas a la acción */ --pu-comp-destacado-fondo: var(--md-sys-color-primary); --pu-comp-destacado-texto: var(--md-sys-color-on-primary); /* Pie de página: azul noche exacto del manual en claro (decisión de la Fundación, noviembre de 2026) */ --pu-comp-pie-fondo: var(--pu-marca-azul-noche); --pu-comp-pie-texto: var(--pu-marca-blanco); --pu-comp-pie-borde: transparent; /* Opción elegida en el botón segmentado «Apariencia» del pie */ --pu-comp-eleccion-fondo: var(--md-sys-color-secondary-container); --pu-comp-eleccion-texto: var(--pu-comp-pagina-texto); /* Botón Donar y botón amarillo de las llamadas: colores de la marca */ --pu-comp-donar-fondo: var(--pu-marca-amarillo); --pu-comp-donar-texto: var(--pu-marca-azul-noche); /* Testimonios: colores de la marca con texto azul noche */ --pu-comp-testimonio-texto: var(--pu-marca-azul-noche); --pu-comp-testimonio-1-fondo: var(--pu-marca-menta); --pu-comp-testimonio-2-fondo: var(--pu-marca-azul-claro); --pu-comp-testimonio-3-fondo: var(--pu-marca-turquesa); /* Logos de otras marcas (aliados, medios de pago, Instagram): sus manuales piden fondo blanco, también en el esquema oscuro */ --pu-comp-logos-fondo: var(--pu-marca-blanco); --pu-comp-logos-texto: var(--pu-marca-azul-noche); /* Margen interior de la placa blanca de los medios de pago: en claro la tarjeta ya es blanca y no hace falta */ --pu-comp-logos-relleno: 0; /* Capas de estado listas para usar como background-image. currentcolor es el color del contenido del elemento, como pide M3. */ --pu-capa-hover: color-mix(in srgb, currentcolor var(--md-sys-state-hover-state-layer-opacity), transparent); --pu-capa-focus: color-mix(in srgb, currentcolor var(--md-sys-state-focus-state-layer-opacity), transparent); --pu-capa-pressed: color-mix(in srgb, currentcolor var(--md-sys-state-pressed-state-layer-opacity), transparent); } /* Esquema oscuro: solo cambian los tokens de componente que en oscuro deben usar otro rol. Los roles M3 ya cambian solos (bloque generado). Se aplica igual que el bloque generado: sistema en oscuro sin la elección «Claro», o elección «Oscuro» en el pie (docs/js/apariencia.js). Solo en pantalla: al imprimir se usa siempre el esquema claro. El segundo bloque repite las mismas variables: si cambias una, cámbiala en los dos (npm run contraste avisa si no coinciden). */ @media screen and (prefers-color-scheme: dark) { :root:not([data-esquema="claro"]) { /* Texto general y foco: el azul noche no se lee sobre fondo oscuro */ --pu-comp-pagina-texto: var(--md-sys-color-on-surface); --pu-comp-foco: var(--md-sys-color-on-surface); /* Fondo de la página: en oscuro, surface, como antes */ --pu-comp-pagina-fondo: var(--md-sys-color-surface); /* Barra superior: en oscuro, el mismo fondo de la página, como antes */ --pu-comp-encabezado-fondo: var(--md-sys-color-surface); --pu-comp-nav-actual-fondo: var(--md-sys-color-surface-container); /* En oscuro, M3 indica la elevación aclarando la superficie */ --pu-comp-seccion-alterna-fondo: var(--md-sys-color-surface-container-low); --pu-comp-tarjeta-fondo: var(--md-sys-color-surface-container-high); /* Bloques destacados en el verde exacto de la marca (primary-container), en vez del verde claro de primary, que deslumbraría. Texto on-surface (6,37:1) y no on-primary-container (4,54:1), para tener margen sobre el mínimo de 4,5:1 (decisión de la Fundación, noviembre de 2026) */ --pu-comp-destacado-fondo: var(--md-sys-color-primary-container); --pu-comp-destacado-texto: var(--md-sys-color-on-surface); /* Pie de página: la superficie más oscura, separada por un borde */ --pu-comp-pie-fondo: var(--md-sys-color-surface-container-lowest); --pu-comp-pie-texto: var(--md-sys-color-on-surface); --pu-comp-pie-borde: var(--md-sys-color-outline-variant); /* Testimonios: los pastel de la marca deslumbran sobre fondo oscuro; se usan los contenedores M3 de la misma familia de color */ --pu-comp-testimonio-texto: var(--md-sys-color-on-surface); --pu-comp-testimonio-1-fondo: var(--md-sys-color-secondary-container); --pu-comp-testimonio-2-fondo: var(--md-sys-color-tertiary-container); --pu-comp-testimonio-3-fondo: var(--md-sys-color-primary-container); --pu-comp-logos-relleno: 0.75rem; /* Opción elegida de «Apariencia»: secondary, más claro, para que se distinga del pie oscuro (secondary-container daría 2,15:1) */ --pu-comp-eleccion-fondo: var(--md-sys-color-secondary); --pu-comp-eleccion-texto: var(--md-sys-color-on-secondary); } } @media screen { :root[data-esquema="oscuro"] { --pu-comp-pagina-texto: var(--md-sys-color-on-surface); --pu-comp-foco: var(--md-sys-color-on-surface); --pu-comp-pagina-fondo: var(--md-sys-color-surface); --pu-comp-encabezado-fondo: var(--md-sys-color-surface); --pu-comp-nav-actual-fondo: var(--md-sys-color-surface-container); --pu-comp-seccion-alterna-fondo: var(--md-sys-color-surface-container-low); --pu-comp-tarjeta-fondo: var(--md-sys-color-surface-container-high); --pu-comp-destacado-fondo: var(--md-sys-color-primary-container); --pu-comp-destacado-texto: var(--md-sys-color-on-surface); --pu-comp-pie-fondo: var(--md-sys-color-surface-container-lowest); --pu-comp-pie-texto: var(--md-sys-color-on-surface); --pu-comp-pie-borde: var(--md-sys-color-outline-variant); --pu-comp-testimonio-texto: var(--md-sys-color-on-surface); --pu-comp-testimonio-1-fondo: var(--md-sys-color-secondary-container); --pu-comp-testimonio-2-fondo: var(--md-sys-color-tertiary-container); --pu-comp-testimonio-3-fondo: var(--md-sys-color-primary-container); --pu-comp-logos-relleno: 0.75rem; --pu-comp-eleccion-fondo: var(--md-sys-color-secondary); --pu-comp-eleccion-texto: var(--md-sys-color-on-secondary); } } /* Elección de apariencia en el pie: controles nativos y barras de desplazamiento siguen el esquema elegido */ :root[data-esquema="claro"] { color-scheme: light; } @media screen { :root[data-esquema="oscuro"] { color-scheme: dark; } } /* 5. Espaciado, rejilla y anchos -------------------------------------- */ /* Escala de espaciado de M3: pasos de 4 px (4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 72, 80, 96), escritos en rem (4 px = 0,25 rem) para que crezcan con el zoom y con el tamaño de letra que elija la persona. material-web no publica tokens de espaciado (su hoja de ruta los deja pendientes), así que usan el prefijo del sitio, --pu-. Dos niveles, como los tokens «ref» y «sys» de M3: a) Escala fija, --pu-espacio-: el número es el valor en píxeles. Para medidas internas de un componente (relleno de un botón, separación entre un ícono y su texto, alturas mínimas). b) Espacios de uso, --pu-espacio-xs … xl: cambian con la clase de ventana de M3. Para separar bloques (secciones, tarjetas, párrafos). Token Compacta Mediana Expandida Uso (< 600) (600-839) (≥ 840) --pu-espacio-xs 8 8 8 mínima: leyenda y opciones --pu-espacio-sm 12 12 16 entre párrafos y elementos de una lista --pu-espacio-md 20 24 28 relleno de tarjetas; entre bloques de una sección --pu-espacio-lg 32 32 40 relleno de la portada; entre bloques grandes --pu-espacio-xl 48 56 64 relleno vertical de cada sección Rejilla de M3 (ver styles.css, «3. Layout»): --pu-rejilla-columnas 4 8 12 --pu-rejilla-margen 16 24 24 margen lateral de la página --pu-rejilla-separacion 16 24 24 espacio entre columnas Área táctil: --pu-area-tactil (48 px), mínimo para todo lo que se pulsa. Los puntos de quiebre, 600 y 840 px, se escriben 37.5rem y 52.5rem en las @media (CSS no admite variables en @media). Si cambian, búscalos por esos valores en este archivo y en styles.css. */ :root { /* a) Escala fija */ --pu-espacio-4: 0.25rem; --pu-espacio-8: 0.5rem; --pu-espacio-12: 0.75rem; --pu-espacio-16: 1rem; --pu-espacio-20: 1.25rem; --pu-espacio-24: 1.5rem; --pu-espacio-28: 1.75rem; --pu-espacio-32: 2rem; --pu-espacio-40: 2.5rem; --pu-espacio-48: 3rem; --pu-espacio-56: 3.5rem; --pu-espacio-64: 4rem; --pu-espacio-72: 4.5rem; --pu-espacio-80: 5rem; --pu-espacio-96: 6rem; /* b) Espacios de uso: clase compacta (< 600 px) */ --pu-espacio-xs: var(--pu-espacio-8); --pu-espacio-sm: var(--pu-espacio-12); --pu-espacio-md: var(--pu-espacio-20); --pu-espacio-lg: var(--pu-espacio-32); --pu-espacio-xl: var(--pu-espacio-48); /* Rejilla: clase compacta */ --pu-rejilla-columnas: 4; --pu-rejilla-margen: var(--pu-espacio-16); --pu-rejilla-separacion: var(--pu-espacio-16); --pu-area-tactil: var(--pu-espacio-48); /* Anchos máximos: del contenido de la página y de las líneas de texto */ --pu-ancho-max: 72rem; --pu-ancho-texto: 42rem; } /* Clase mediana: 600 a 839 px */ @media (min-width: 37.5rem) { :root { --pu-espacio-md: var(--pu-espacio-24); --pu-espacio-xl: var(--pu-espacio-56); --pu-rejilla-columnas: 8; --pu-rejilla-margen: var(--pu-espacio-24); --pu-rejilla-separacion: var(--pu-espacio-24); } } /* Clase expandida: 840 px o más */ @media (min-width: 52.5rem) { :root { --pu-espacio-sm: var(--pu-espacio-16); --pu-espacio-md: var(--pu-espacio-28); --pu-espacio-lg: var(--pu-espacio-40); --pu-espacio-xl: var(--pu-espacio-64); --pu-rejilla-columnas: 12; } }