/* ============================================================================ BASE AZUL — tokens.css Fuente única de verdad del sistema de diseño. Compartido por: · la web comandoSTROKE (CLAUDE/WEB/) · las piezas HTML/PDF (CLAUDE/RECURSOS/RESUMEN EVERNOTE//resumen.html) Copia canónica: CLAUDE/RECURSOS/DISEÑO BASE AZUL/tokens.css Al publicar la web se copia a WEB/assets/css/tokens.css (no se edita allí). PRINCIPIO CLAVE — dos capas de color: 1. COLORES DE MARCA (--marca-*) identidad, no cambian nunca. 2. COLORES DE ROL (--fondo, --texto, --enlace…) qué función cumple el color. Son los que se usan en el CSS. Cambian entre modo claro y oscuro. Nunca uses un color de marca directamente en una regla: usa siempre el rol. ========================================================================== */ :root { /* ---------- 1. COLORES DE MARCA (invariables) ---------------------------- */ --marca-azul: #5B84A3; /* azul principal */ --marca-azul-suave: #B9CEDD; /* fondos y acentos suaves */ --marca-azul-oscuro: #24425A; /* azul estructural, el ancla de la web */ --marca-gris: #9BA3AC; --marca-gris-claro: #EEF1F3; --marca-negro: #2E3338; /* nunca negro puro */ --marca-ambar: #C08A3E; --marca-ambar-suave: #F7ECD8; --marca-blanco: #FFFFFF; /* Rojo del logo comandoSTROKE. USO EXCLUSIVO DEL LOGO — nunca en la interfaz: en un contexto clínico el rojo significa "peligro/alerta" y chocaría con el recuadro ámbar de aviso. Si aparece rojo fuera del logo, es un error. */ --marca-rojo: #B00306; --marca-tinta: #082434; /* azul del wordmark del logo */ /* ---------- 2. VARIANTES ACCESIBLES ------------------------------------- */ /* Derivadas de la marca, oscurecidas hasta cumplir WCAG AA (4.5:1) para texto pequeño. Usar SIEMPRE estas en texto; las de marca son para fondos, reglas, iconos grandes y superficies. --azul-texto #3F6A8C 5.75:1 sobre blanco · 5.07:1 sobre gris claro --gris-texto #6B7581 4.68:1 sobre blanco · 4.13:1 sobre gris claro --ambar-texto #9A6E32 4.52:1 sobre blanco */ --azul-texto: #3F6A8C; --gris-texto: #6B7581; --ambar-texto: #9A6E32; /* ---------- 3. ROLES — MODO CLARO (por defecto) -------------------------- */ --fondo: var(--marca-gris-claro); /* lienzo de la página */ --superficie: var(--marca-blanco); /* tarjetas, hojas */ --superficie-alt: #F6F8F9; /* zonas alternas, thead */ --borde: #E1E7EB; --borde-fuerte: #C9D4DB; --texto: var(--marca-negro); --texto-suave: var(--gris-texto); /* secundario, pies, metadatos */ --texto-invertido: var(--marca-blanco); --marca: var(--marca-azul-oscuro);/* barra de navegación, pie, hero */ --acento: var(--marca-azul); /* reglas, iconos, superficies; NO texto pequeño */ --acento-suave: var(--marca-azul-suave); --acento-tenue: rgba(91,132,163,0.12); /* fondos de tag, hover suave */ --enlace: var(--azul-texto); --enlace-hover: var(--marca-azul-oscuro); --aviso: var(--marca-ambar); /* borde e icono del recuadro ámbar */ --aviso-texto: var(--ambar-texto); --aviso-fondo: var(--marca-ambar-suave); --foco: var(--marca-azul-oscuro);/* anillo de foco: 10.5:1, cumple de sobra */ --sombra-1: 0 1px 3px rgba(36,66,90,0.08); --sombra-2: 0 1px 3px rgba(36,66,90,0.08), 0 12px 28px rgba(36,66,90,0.10); /* ---------- 4. TIPOGRAFÍA ------------------------------------------------ */ --fuente-titulo: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; --fuente-cuerpo: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; --fuente-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Escala fluida: crece con el ancho de pantalla sin saltos ni media queries. Cuerpo a 17px en móvil y 18px en escritorio — la web se lee, no se ojea; las piezas impresas siguen a 13–15px porque el papel tolera menos aire. */ --t-cuerpo: clamp(1.0625rem, 0.98rem + 0.35vw, 1.125rem); --t-pequeno: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); --t-micro: 0.8125rem; /* metadatos, pies de figura, tags */ --t-lede: clamp(1.125rem, 1.02rem + 0.5vw, 1.3125rem); --t-h3: clamp(1.1875rem, 1.08rem + 0.45vw, 1.375rem); --t-h2: clamp(1.4375rem, 1.24rem + 0.9vw, 1.875rem); --t-h1: clamp(1.875rem, 1.45rem + 2.1vw, 3rem); --t-display: clamp(2.375rem, 1.7rem + 3.2vw, 4rem); /* solo hero */ --peso-titulo: 700; --peso-semi: 600; --peso-cuerpo: 400; --interlineado: 1.6; /* cuerpo: más aire que en papel (1.55) */ --interlineado-titulo: 1.15; --medida: 68ch; /* ancho máximo de una línea de texto */ /* ---------- 5. ESPACIADO, RADIO Y LAYOUT --------------------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --radio-s: 10px; /* tags, botones pequeños */ --radio: 18px; /* radio de marca — tarjetas, recuadros */ --radio-l: 24px; /* bloques grandes, hero */ --radio-pill: 999px; --ancho-texto: 44rem; /* columna de lectura de una entrada */ --ancho-contenido: 68rem; /* rejillas de tarjetas, índices */ --ancho-maximo: 84rem; /* barra de navegación, pie */ --transicion: 160ms ease; } /* ---------- 6. ROLES — MODO OSCURO ---------------------------------------- */ /* Se aplica si el sistema del usuario está en oscuro Y no ha forzado el claro, o si ha pulsado el interruptor (data-theme="dark"). La marca se invierte: en oscuro el color de marca pasa a ser el azul suave. Contrastes verificados sobre --fondo #121A22: --texto #E6EBEF 14.6:1 --texto-suave #9BA3AC 6.9:1 --acento-suave #B9CEDD 10.8:1 --aviso #D3AD78 8.4:1 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fondo: #121A22; --superficie: #18232E; --superficie-alt: #1F2C3A; --borde: #2C3B4A; --borde-fuerte: #3D5163; --texto: #E6EBEF; --texto-suave: #9BA3AC; --texto-invertido: #16212C; --marca: var(--marca-azul-suave); --acento: #7FA8C4; --acento-suave: #B9CEDD; --acento-tenue: rgba(127,168,196,0.16); --enlace: #9DC2DC; --enlace-hover: #C8DDEB; --aviso: #D3AD78; --aviso-texto: #E0C59E; --aviso-fondo: rgba(211,173,120,0.14); --foco: #D3AD78; --sombra-1: 0 1px 3px rgba(0,0,0,0.4); --sombra-2: 0 1px 3px rgba(0,0,0,0.4), 0 12px 28px rgba(0,0,0,0.45); } } :root[data-theme="dark"] { --fondo: #121A22; --superficie: #18232E; --superficie-alt: #1F2C3A; --borde: #2C3B4A; --borde-fuerte: #3D5163; --texto: #E6EBEF; --texto-suave: #9BA3AC; --texto-invertido: #16212C; --marca: var(--marca-azul-suave); --acento: #7FA8C4; --acento-suave: #B9CEDD; --acento-tenue: rgba(127,168,196,0.16); --enlace: #9DC2DC; --enlace-hover: #C8DDEB; --aviso: #D3AD78; --aviso-texto: #E0C59E; --aviso-fondo: rgba(211,173,120,0.14); --foco: #D3AD78; --sombra-1: 0 1px 3px rgba(0,0,0,0.4); --sombra-2: 0 1px 3px rgba(0,0,0,0.4), 0 12px 28px rgba(0,0,0,0.45); } /* ---------- 7. IMPRESIÓN --------------------------------------------------- */ /* Las fichas y los PDFs se generan SIEMPRE en modo claro: el papel no tiene modo oscuro y un fondo oscuro se come el tóner. Se fuerzan los roles claros. */ @media print { :root, :root[data-theme="dark"] { --fondo: #FFFFFF; --superficie: #FFFFFF; --superficie-alt: #F6F8F9; --borde: #E1E7EB; --texto: #2E3338; --texto-suave: #6B7581; --texto-invertido: #FFFFFF; --marca: #24425A; --acento: #5B84A3; --acento-suave: #B9CEDD; --enlace: #3F6A8C; --aviso: #C08A3E; --aviso-fondo: #F7ECD8; --sombra-1: none; --sombra-2: none; } } /* ---------- 8. BASE MÍNIMA ------------------------------------------------- */ * { box-sizing: border-box; } html { color-scheme: light dark; /* barras de scroll y controles nativos coherentes */ -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--fuente-cuerpo); font-size: var(--t-cuerpo); font-weight: var(--peso-cuerpo); line-height: var(--interlineado); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--fuente-titulo); font-weight: var(--peso-titulo); line-height: var(--interlineado-titulo); color: var(--texto); text-wrap: balance; /* evita títulos con una palabra huérfana */ margin: 0 0 var(--e-3); } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); font-weight: var(--peso-semi); } p { margin: 0 0 var(--e-4); max-width: var(--medida); text-wrap: pretty; } a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--enlace-hover); } img, svg, video { max-width: 100%; height: auto; } /* El atributo `hidden` NO oculta elementos SVG: la regla `[hidden]{display:none}` del navegador está limitada al espacio de nombres HTML. Sin esto, un icono SVG marcado como hidden se sigue viendo. */ [hidden] { display: none !important; } /* Foco visible SIEMPRE — se navega con teclado más de lo que se cree, y es requisito WCAG. Nunca poner outline:none sin sustituirlo por otro indicador. */ :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: var(--radio-s); } /* Respeta a quien pide menos animación (mareo, migraña, vestibulopatías). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Enlace de salto al contenido: invisible hasta que se tabula. Accesibilidad. */ .saltar-al-contenido { position: absolute; left: -9999px; background: var(--marca); color: var(--texto-invertido); padding: var(--e-3) var(--e-4); border-radius: var(--radio-s); z-index: 100; } .saltar-al-contenido:focus { left: var(--e-4); top: var(--e-4); } /* Solo para lectores de pantalla. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }