# Workmed Salud Mental — System Design > Documento de **sistema de diseño** (visual / brand system) del proyecto > Workmed Salud Mental. Su propósito es servir como **fuente de verdad > replicable**: cualquier otro proyecto del ecosistema Workmed puede > reconstruir el mismo lenguaje visual leyendo solo este archivo. > > Este NO es un documento de arquitectura de software. Cubre tokens, > tipografía, componentes y patrones de layout. --- ## 1. Principios de marca | Principio | Aplicación | |---|---| | **Clínico, no hospitalario** | Tipografía humanista (Poppins), no serifa institucional. Azul profundo como base, rojo como acento puntual. | | **Confianza por densidad controlada** | `--pad-section-y: 120px` por defecto. El aire es parte del mensaje: nunca se llenan los anchos al 100%. | | **El rojo es señal, no decoración** | El rojo `#CC2D3B` solo aparece en CTAs primarios, eyebrows, acentos numéricos, estados de alerta. Nunca como fondo de tarjeta neutra. | | **Cards sobre fondo claro, paneles oscuros para foco** | Las superficies normales son blancas sobre `--bg #FAFBFD`. Los bloques que requieren atención (hero card, proceso, callouts, recomendaciones) se invierten a `--wm-azul-oscuro` con texto blanco. | | **Bordes pill para acción, bordes suaves para contenido** | Botones, chips, pills, tabs y badges usan `--r-pill`. Cards y paneles usan `--r-lg` / `--r-xl`. Inputs usan `--r-sm` / `--r-md`. | | **Los títulos no son oraciones** | `h1`–`h3` nunca terminan con punto final. Son enunciados, no párrafos. Ver §10. | --- ## 2. Tokens (CSS custom properties) Todos los tokens viven en `:root` y se consumen vía `var(--…)`. Replicar **literalmente** estos nombres en proyectos hermanos. ### 2.1 Color — paleta de marca ```css --wm-azul: #535A75; /* azul neutro, soporte */ --wm-azul-oscuro: #2D334E; /* PRIMARIO oscuro / paneles */ --wm-rojo: #CC2D3B; /* ACENTO / CTA */ --wm-rojo-700: #A6232E; /* hover del rojo */ --wm-gris: #E2E9EF; /* gris fondo cálido */ --wm-negro: #0A0E1A; /* footer / extremos */ ``` ### 2.2 Color — derivados semánticos ```css --bg: #FAFBFD; /* fondo página */ --bg-soft: #E2E9EF; /* secciones contrastantes claras */ --bg-dark: #2D334E; /* secciones invertidas */ --fg: #2D334E; /* texto principal */ --fg-muted: #535A75; /* texto secundario */ --fg-soft: #7A8197; /* texto terciario / hints */ --line: #D5DCE5; /* borde estándar */ --line-soft: #EAEEF3; /* borde sutil (dividers internos) */ --accent: #CC2D3B; --accent-ink:#2D334E; ``` ### 2.3 Color — estados (semantic states) No están en `:root` pero se usan de forma consistente. Replicar con los mismos valores: | Estado | Background | Foreground | Uso | |---|---|---|---| | Éxito / Done | `rgba(31,138,91,0.12)` | `#1F8A5B` | pills, bands, dots | | Atención / In-progress | `rgba(217,150,30,0.14)` | `#B57810` | pills, bands | | Alerta / Urgent | `rgba(204,45,59,0.10–0.12)` | `var(--wm-rojo)` | pills, bands, dots | | Info / Scheduled | `rgba(45,51,78,0.08)` | `var(--wm-azul-oscuro)` | pills | ### 2.4 Tipografía ```css --font-sans: 'Poppins', system-ui, -apple-system, sans-serif; ``` - Carga desde Google Fonts: `Poppins` pesos `300, 400, 500, 600, 700`. - Body: `font-weight: 300` (light) — característica distintiva. - Headings: `font-weight: 700`, `letter-spacing` negativo agresivo. - Antialiasing + `text-rendering: optimizeLegibility` activos. **Escala tipográfica** (clamp para fluidez): | Nivel | Tamaño | Tracking | Line-height | |---|---|---|---| | `h1` | `clamp(44px, 5.8vw, 88px)` | `-0.035em` | `1.05` | | `h2` | `clamp(32px, 3.4vw, 52px)` | `-0.028em` | `1.05` | | `h3` | `clamp(22px, 1.8vw, 28px)` | `-0.015em` | `1.05` | | `h4` | `18px` | `-0.01em` | normal | | `.lead` | `clamp(18px, 1.4vw, 22px)` | normal | `1.5` | | body | `16px` | normal | `1.55` | | `.eyebrow` | `12px` weight 500 | `0.16em` UPPER | rojo | | small / meta | `12.5–13.5px` | normal | `1.55` | ### 2.5 Radios ```css --r-xs: 4px; /* badges mínimos */ --r-sm: 8px; /* inputs, navegación lateral */ --r-md: 12px; /* mini-cards, callouts pequeños */ --r-lg: 18px; /* cards estándar, paneles */ --r-xl: 26px; /* hero card, form principal, contact form */ --r-pill: 999px; /* botones, chips, pills, tabs */ ``` ### 2.6 Espaciado / densidad Sistema **doblemente parametrizado**: las páginas pueden cambiar densidad con `[data-density="compact"]` en el `` (controlado por el panel de tweaks). ```css /* Default (aireada) */ --pad-section-y: 120px; --pad-card: 28px; --gap-card: 20px; --gap-section: 80px; /* [data-density="compact"] */ --pad-section-y: 80px; --pad-card: 20px; --gap-card: 14px; --gap-section: 56px; ``` **Contenedores**: ```css .container { width: min(1320px, 92vw); margin: 0 auto; } .container-tight { width: min(1080px, 90vw); margin: 0 auto; } ``` ### 2.7 Sombras ```css --shadow-sm: 0 1px 2px rgba(45,51,78,0.05), 0 0 0 1px rgba(45,51,78,0.04); --shadow-md: 0 4px 16px rgba(45,51,78,0.08), 0 0 0 1px rgba(45,51,78,0.04); --shadow-lg: 0 18px 40px -12px rgba(45,51,78,0.18), 0 0 0 1px rgba(45,51,78,0.05); ``` Regla: las sombras siempre usan tinta del color primario (`#2D334E`), **nunca** negro puro. Esto evita el "gris muerto" de bibliotecas genéricas. ### 2.8 Transiciones Curvas y duraciones recurrentes: - Microinteracción: `transition: .15s ease` - Estándar: `transition: .2s ease` - Acordeón / colapsable: `transition: max-height .3s ease` - Hover de cards: `transform: translateY(-2px)` + sombra `--shadow-md` - Hover de flechas: `transform: translateX(3px)` --- ## 3. Variantes globales (data-attributes) El sistema soporta variantes vía atributos en el ``. Sirven para prototipar y para empresas con sub-marcas. ```html data-palette="balanceado" data-card-style="shadow"> ``` | Atributo | Valores | Efecto | |---|---|---| | `data-density` | `compact` | Reduce `--pad-section-y`, `--pad-card`, `--gap-card`, `--gap-section`. | | `data-palette` | `rojo`, `balanceado` | Cambia tinte del eyebrow del hero y números display. | | `data-card-style` | `flat`, `border`, `shadow`, `icon` | Cambia estilo de `.eval-card` (sin sombra, con borde, con sombra, con icono grande). | --- ## 4. Componentes ### 4.1 Botones — `.btn` Base común: pill, weight 500, gap 10px, transición 0.15–0.2s. | Clase | Background | Texto | Hover | |---|---|---|---| | `.btn .btn-primary` | `--wm-rojo` | `#fff` | `--wm-rojo-700` + lift `translateY(-1px)` | | `.btn .btn-dark` | `--wm-azul-oscuro` | `#fff` | `#1F2541` | | `.btn .btn-ghost` | `#fff` + `border:--line` | `--fg` | borde a `--fg` | | `.btn .btn-link` | transparent | `--wm-rojo` | underline | Padding estándar: `14px 22px`, font-size `15px`. Flechas hijas con `.arr` se desplazan `translateX(3px)` en hover. ### 4.2 Eyebrow ```css font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wm-rojo); /* o blanco semi-transparente sobre fondo oscuro */ ``` Marca de inicio en TODA sección. Sobre fondo oscuro se usa `rgba(255,255,255,0.55–0.60)`. ### 4.3 Chips de filtro — `.chip` Pill blanca con borde gris. Estado `.active` invierte a `--wm-azul-oscuro` con texto blanco. Soporta contador hijo `.count` (badge pequeño dentro). ### 4.4 Pills de estado — `.evx-pill`, `.assign-card__tag`, `.test-result__band`, `.pi-flag` Convención de modificadores (todos los contextos comparten paleta): | Modificador | Color | |---|---| | `--scheduled` / azul | `rgba(45,51,78,0.08)` + `--wm-azul-oscuro` | | `--in-progress` | `rgba(217,150,30,0.14)` + `#B57810` | | `--urgent` / `--alert` / `--report-due` / `--new` | `rgba(204,45,59,0.10–0.12)` + `--wm-rojo` | | `--done` / `--ok` | `rgba(31,138,91,0.12)` + `#1F8A5B` | Las `.evx-pill` tienen un `dot` `::before` (6×6, `border-radius: 50%`, `background: currentColor`). ### 4.5 Cards Tres familias principales: **a) Card de contenido — `.eval-card`** - `background: #fff`, `border-radius: --r-lg`, `padding: --pad-card` - Estructura: head (icon + tag) → h3 → p → meta (border-top) - Flecha circular absoluta arriba-derecha (`.eval-card__arr`) - Hover: lift `-2px`, sombra `--shadow-md`, icono se pinta a `--wm-rojo` - Cuatro variantes por `data-card-style` **b) Card destacado — `.featured-card`** - `--r-xl`, padding `36px`, min-height `320px` - Tres skins: `--dark` (azul oscuro), `--rojo` (rojo), `--gris` (gris cálido) - Número grande inferior izquierda (`.num`, clamp 48–72px) + flecha circular derecha **c) Card de lista — `.assign-card` / `.evx-today__item`** - Grid horizontal: `56px 1fr auto` - Icono cuadrado redondeado a la izquierda, contenido al centro, CTA a la derecha - Hover: borde transparente + sombra + lift `-1px` ### 4.6 Inputs y formularios ```css .field input, .field textarea, .field select { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; background: #fff; transition: border-color .15s, box-shadow .15s; } /* focus state — IDENTICO en TODOS los inputs del sistema */ :focus { outline: none; border-color: var(--wm-azul-oscuro); box-shadow: 0 0 0 4px rgba(45,51,78,0.07); } ``` Labels: `12.5px`, weight `500`, `letter-spacing: 0.05em`, **UPPERCASE**, color `--fg-muted`. Filas dobles: `.field-row { grid-template-columns: 1fr 1fr; gap: 14px; }`. Checkboxes/radios: `accent-color: var(--wm-azul-oscuro)`. ### 4.7 Tabs y segmented controls Dos patrones idénticos en estética: ```css /* tabs */ display: flex; gap: 4px; padding: 4px; background: var(--bg-soft); border-radius: var(--r-pill); ``` Pestañas hijas son pill, font-size `12.5–14px`, weight 500. Activa: `background: #fff` + `--shadow-sm` (sobre fondo claro) o `background: --wm-azul-oscuro` + texto blanco (sobre fondo blanco). Usado en: `.auth-tabs`, `.dash-tabs`, `.pi-segment`, `.evx-card__filter`. ### 4.8 Header (público) ``` [brand] ……(nav links)…… [search pill] [login pill] ``` - Sticky con `backdrop-filter: blur(12px) saturate(140%)` - Fondo `rgba(250,251,253,0.85)` - Border-bottom de `--line-soft` - Link activo: subraya con barra roja `2px` 22px debajo - Search pill: `--r-pill`, `min-width: 220px`, kbd `⌘K` inline - Login pill: pill blanca con borde, icono azul oscuro ### 4.9 Hero Grid 1.25fr / 1fr (texto / card oscura). - Texto: h1 con `.accent` rojo y subrayado opcional (`::after` 4px barra) - `.hero-meta`: 3 columnas separadas por border-top, números 36px en `--wm-azul-oscuro` - `.hero-card`: panel azul oscuro con eyebrow blanco translúcido, lista con dots circulares semitransparentes, CTA pill rojo abajo, decoración radial gradient rojo en esquina (`hero-deco`) ### 4.10 Pasos numerados — `.step` - Fondo: `rgba(255,255,255,0.04)` sobre `--wm-azul-oscuro` - Numeración con barra horizontal roja `28px × 1px` + número rojo - Layout: grid 4 columnas en desktop, 2 en tablet, 1 en mobile ### 4.11 Sidebar de aplicación — `.evx-side` Para vistas de operador (evaluador): - 240px, `--wm-azul-oscuro`, sticky `height: 100vh` - Logo arriba, nav vertical, usuario abajo con `border-top` translúcido - Links: gap 12px, radius `--r-sm`, hover `rgba(255,255,255,0.06)` - Activo: `rgba(255,255,255,0.1)` + texto blanco - Badge rojo a la derecha para contadores (`.badge`) - Section labels: `11px`, `0.16em` tracking, UPPER, blanco 35% - Colapsa a barra horizontal scroll a <1100px ### 4.12 Tabla — `.evx-table` - Header: `11px`, `0.12em` tracking, UPPER, `--fg-soft`, border-bottom `--line` - Filas: padding vertical `16px`, border-bottom `--line-soft` - Hover de fila: `background: rgba(45,51,78,0.02)` - Patient cell: avatar circular `36×36` `--bg-soft` con iniciales en azul oscuro, nombre + sub gris ### 4.13 KPIs — `.evx-kpi` / `.dash-stat` Dos variantes con la misma estructura: | Fondo claro (`.evx-kpi`) | Fondo oscuro (`.dash-stat`) | |---|---| | `#fff` + border `--line-soft` | `rgba(255,255,255,0.05)` + border translúcido | | Número `38px` weight 700 en azul oscuro | Número `36px` weight 700 en blanco | | Label UPPER `12px` en `--fg-soft` | Label `13px` en blanco 60% | | Delta verde/rojo con flecha | (sin delta) | ### 4.14 Pre-informe / draft IA — `.pi-*` Patrón de "documento que se genera": - Grid 360px / 1fr (sidebar de controles / draft) - Header del paciente con avatar grande circular `64px` azul oscuro - ID pill rojo con `font-family: ui-monospace` - Meta como `
` en grid 5 columnas - Estados del generador: `.pi-status--ready` (verde), `.pi-status--working` (rojo pulsando) - Steps de generación con tres estados visuales: pending (gris) → active (azul, spinner) → done (verde, check) - Cada sección del draft con número cuadrado azul oscuro `22×22`, herramientas inline que aparecen en hover - Quote pull con border-left rojo 3px, itálica - Mini-cards `.pi-cards-row` (3 columnas) para métricas internas - Banner final `.pi-recommendation`: azul oscuro, headline grande, sirve de cierre --- ## 5. Patrones de layout ### 5.1 Sección estándar ```html
Categoría

Título de la sección

Bajada opcional, max-width 38ch.

``` - Padding vertical: `var(--pad-section-y)` (120px / 80px en compact) - `.sec-head` es flex con `align-items: end` y `justify-content: space-between` - Margin-bottom estándar: `48px` ### 5.2 Inversión de fondo Patrón recurrente: una sección de cada 2–3 invierte a `--wm-azul-oscuro` con texto blanco. Reglas: ```css .process { background: var(--wm-azul-oscuro); color: #fff; } .process h2 { color: #fff; } .process .eyebrow { color: rgba(255,255,255,0.6); } .process .lead { color: rgba(255,255,255,0.75); } ``` Texto secundario sobre fondo oscuro siempre como `rgba(255,255,255,0.6–0.75)`, **nunca** como gris hex. ### 5.3 Decoración radial Único elemento decorativo permitido. Esfera de gradiente rojo semitransparente en esquinas de paneles oscuros: ```css content: ''; position: absolute; right: -120px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(204,45,59,0.18), transparent 60%); pointer-events: none; ``` Variantes en tamaño/posición: `hero-deco`, `auth-aside::before`, `dash-top::after`. ### 5.4 Breadcrumbs ```html ``` - `13px`, color `--fg-muted` - Separadores `` con `opacity: 0.4` - Aparecen también como `.pi-breadcrumbs` (idéntico) ### 5.5 Layout de aplicación (área autenticada) Dos shells reutilizables: **a) Shell paciente (`portal/dashboard.html`)** - `.dash-top` (banner oscuro con saludo + KPIs) - `.dash-body` con margen negativo `-56px` para superponerse - `.dash-tabs` flotando arriba del contenido **b) Shell operador (`portal/evaluador.html`)** - `.evx-shell` grid 240px / 1fr - `.evx-side` lateral azul oscuro - `.evx-main` con padding `36px 48px 80px`, max-width `1400px` - Topbar con search pill + acciones ### 5.6 Layout de evaluación (test interactivo) - `.test-section` con fondo `--bg-soft` y min-height casi viewport - `.test-shell` blanco centrado, max-width `760px`, radius `--r-xl`, padding `56px` - Header de progreso: eyebrow + barra de progreso lineal con fill rojo - Pregunta grande (`clamp(22px, 2.2vw, 30px)`, weight 600) - Opciones radio personalizadas: pill grande, hover azul oscuro tenue, seleccionada en `--wm-azul-oscuro` con texto blanco y radio rojo - Nav inferior con prev/next como `.btn-ghost` / `.btn-primary` - Pantalla de resultado: círculo `200×200` azul oscuro con número 72px, band pill (good/mid/bad), breakdown en gris claro --- ## 6. Responsivo Breakpoints únicos del sistema: | Breakpoint | Cambios principales | |---|---| | **≤ 1180px** | `.pi-grid` colapsa a 1 columna | | **≤ 1100px** | `.evx-shell` colapsa, sidebar pasa a topbar horizontal scroll | | **≤ 980px** | Hero, featured, b2b, faq, contact → 1 columna. Eval-grid → 2 col. Site-nav/search ocultos. | | **≤ 900px** | Auth-shell → 1 columna. Dash-statgrid → 2 col. Assign-card → 1 columna (icono oculto). | | **≤ 700px** | Pi-header__meta → 2 columnas. Drafts en mobile padding. | | **≤ 640px** | Eval-grid → 1 columna. Process-steps → 1 col. Field-row → 1 col. | | **≤ 600px** | Dash-statgrid → 1 columna. | Regla práctica: el sistema **no** define container queries, solo media queries en `max-width`. Las grids siempre colapsan progresivamente `4 → 2 → 1`, nunca saltan directo. --- ## 7. Iconografía - Stroke icons, **no** filled. - Tamaños estándar: - Inline (en botones, eyebrows): `14–16px` - En cards: `18–24px` - En contenedores cuadrados (`.eval-icon`, `.assign-card__ico`): `44×44` o `56×56`, contenedor con `border-radius: 12–14px` y fondo `--wm-gris` / `--bg-soft` - En hover de card el contenedor del icono se llena de `--wm-rojo` con icono blanco. - Set único en `assets/icons.jsx` (componentes React). --- ## 8. Logo y marca tipográfica Dos modos de marca: **a) Logo gráfico** (`brand--logo`) ```html ``` - Altura del logo: `28px` - Subtítulo: `10.5px`, weight 500, `0.15em` tracking, UPPER, separado por `border-left: 1px var(--line)` con `padding-left: 12px` - Sobre fondo oscuro: `logo-on-dark.png` + sub en blanco 55% con border-color blanco 15% **b) Marca tipográfica** (fallback / favicon-like) ```html
W
Workmed
Salud Mental
``` - `.brand__mark`: cuadrado `36×36`, `border-radius: 8px`, fondo `--wm-azul-oscuro`, letra blanca weight 700 - Punto rojo `::after` en esquina inferior derecha (`12×12`, `border: 2px solid --bg`) → el "punto de salud" que ancla la identidad --- ## 9. Animaciones Inventario completo (no inventar nuevas sin justificación): ```css @keyframes pi-pulse { /* status indicator working */ 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes pi-spin { /* loader steps */ from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes pi-rise { /* secciones del draft IA */ to { opacity: 1; transform: none; } } ``` Transiciones directas (sin keyframes): hover lifts, expansiones de FAQ (`max-height`), barras de progreso (`width`). --- ## 10. Convenciones de escritura (copy) Reglas que aplican a **todos** los textos de la interfaz, independientemente de la plataforma. ### 10.1 Títulos (`h1`–`h3`) - **Nunca terminan con punto final.** Los títulos son enunciados, no oraciones completas. - Pueden terminar con coma si el título tiene una segunda línea (`
`). - Se permiten signos de pregunta e interrogación en titulares de FAQ o CTAs retóricos. - Mayúscula solo en la primera palabra y nombres propios (no ALL CAPS salvo `.eyebrow`). **Correcto** ``` Salud mental laboral, con propósito clínico Empieza por una de las tres más pedidas este mes De la solicitud al informe, en cuatro pasos claros ``` **Incorrecto** ``` Salud mental laboral, con propósito clínico. ← punto final prohibido TODAS LAS EVALUACIONES EN UN SOLO LUGAR ← ALL CAPS en h2 prohibido ``` ### 10.2 Subtítulos y párrafos (`.lead`, `p`) - Sí llevan punto final si son oraciones completas. - Texto secundario: máximo `38–42ch` de ancho (`max-width`) para legibilidad. - Voz activa, segunda persona singular ("te enviamos", "cuéntanos"). ### 10.3 Eyebrows - SIEMPRE en mayúsculas (`text-transform: uppercase`). - Sin punto final. - Separador `·` (interpunto) para categorías múltiples, no guión ni `/`. - Ejemplo: `Catálogo · 13 instrumentos` ### 10.4 Labels de formulario - SIEMPRE en mayúsculas. - Sin dos puntos al final. - Ejemplo: `NOMBRE`, `CORREO`, `TIPO DE CONSULTA` ### 10.5 CTAs (botones y links de acción) - Sin punto final. - Flechas `→` o componente `` al final, no al inicio. - Texto corto, imperativo: "Ver evaluaciones", "Solicitar convenio", "Enviar mensaje". --- ## 11. Stack técnico de referencia Aunque este documento es de **diseño**, replicar el sistema requiere mínimo este stack: - HTML estático + React 18 vía UMD CDN + Babel standalone (dev) - Hoja de estilos plana en `assets/styles.css` con custom properties - Hojas por superficie: - `styles.css` — base + landing público - `portal-styles.css` — login + dashboard paciente - `evx-styles.css` — vistas de evaluador - `eval-styles.css` — páginas de evaluación / tests - `pi-styles.css` — pre-informe IA - Sin build step; sin Tailwind; sin CSS-in-JS - Sin librería de componentes externa — todos los componentes son ad-hoc en `components.jsx` Para portar a otro proyecto: 1. Copiar `:root { … }` de `styles.css` íntegro. 2. Copiar variantes `[data-density]`, `[data-palette]`, `[data-card-style]`. 3. Reconstruir tipografía cargando Poppins 300–700. 4. Reutilizar las clases de este documento — son **estables** y no dependen de la marca; cambiar solo los valores de `--wm-*` para re-pintar a otra sub-marca del ecosistema. --- ## 12. Checklist de cumplimiento Al implementar una pantalla nueva, verificar: - [ ] ¿Tiene `.eyebrow` antes del h2? - [ ] ¿El primer CTA es `.btn-primary` (rojo) y los secundarios `.btn-ghost` o `.btn-dark`? - [ ] ¿Las cards usan `--r-lg` y los pills `--r-pill`? - [ ] ¿Los inputs comparten el mismo `:focus` (`box-shadow: 0 0 0 4px rgba(45,51,78,0.07)`)? - [ ] ¿Los textos secundarios usan `--fg-muted` (no un gris arbitrario)? - [ ] ¿Hay máximo **un** elemento rojo prominente por pantalla? - [ ] ¿La sección tiene `padding: var(--pad-section-y) 0`? - [ ] ¿El contenedor es `.container` (1320px) o `.container-tight` (1080px)? - [ ] ¿Sobre fondo oscuro el texto secundario usa `rgba(255,255,255,0.x)` y no un gris hex? - [ ] ¿Las sombras tintan en azul oscuro `rgba(45,51,78,…)` y no en negro? - [ ] ¿Los títulos `h1`–`h3` **no** terminan con punto final? - [ ] ¿Los eyebrows están en MAYÚSCULAS y sin punto? - [ ] ¿Los labels de formulario están en MAYÚSCULAS y sin dos puntos? --- **Versión**: 1.1 — Junio 2026 **Mantenedor**: EMERCOM · Workmed **Fuente**: `assets/styles.css`, `portal-styles.css`, `evx-styles.css`, `eval-styles.css`, `pi-styles.css`