/* ============================================================================ AURELIAI · Base de diseño de demos — CAPA 1: TOKENS BASE ---------------------------------------------------------------------------- Esta capa NO tiene marca. Define neutros, tipografía, espaciado, forma, severidad clínica y las reglas de accesibilidad. Un tema vertical (tokens/.css) se carga DESPUÉS y sólo redefine los tokens de marca. Prefijo propio `--au-*` (modelo Watson/Docplanner `--w-*`, ver research/INDICE.md). Los nombres mapean 1:1 a los semánticos de daisyUI 5 para que una eventual migración sea mecánica: --au-primary → primary --au-primary-content→ primary-content --au-base-100/200/300 → base-100/200/300 --au-info/success/warning/error (+ -content) → idem Fuentes de la evidencia: research/*.md (hex extraídos del CSS de producción). Severidad: Helsinki Design System (hds.hel.fi, MIT). Espaciado, tamaños de cuerpo y patrones de formulario: NHS.UK service manual (service-manual.nhs.uk, MIT). ========================================================================== */ :root { /* ---- 1. NEUTROS --------------------------------------------------------- Escala fría por defecto (salud/software). Los temas cálidos (estética, cuidado domiciliario) redefinen base-100/200/300 y las líneas. --------- */ --au-base-100: #ffffff; /* superficie: tarjetas, modales */ --au-base-200: #f2f5f9; /* = Clínica Alemana, textual */ --au-base-300: #e1e7ed; /* HIP: cerca de #e9ebec (Alemana) */ --au-base-content: #17222b; /* HIP: entre #203442 (Alemana) y #21272a (Integramédica) */ --au-base-content-70: #364855; /* = Clínica Alemana, textual */ --au-base-content-50: #5a6b77; /* HIP */ --au-base-content-30: #929bb2; /* = Dentalink --text-40 */ --au-border: var(--au-base-300); --au-border-strong: #c7d2dd; /* HIP */ /* Regla dura del rubro: NADIE usa #000 en cuerpo. Los textos son negros teñidos (#373737 UC Christus, #21272a Integramédica, #3d3935 Invisalign). */ /* ---- 2. MARCA (placeholders neutros; los pisa el tema vertical) --------- */ --au-primary: #0077c8; /* = Colmena; ~= Integramédica #0079c8, Salcobrand #0074c8 */ --au-primary-hover: #0068b0; /* HIP: un punto más oscuro para AA sobre blanco */ --au-primary-content: #ffffff; /* texto sobre primario */ /* --au-primary-text: la variante del primario que se usa COMO TEXTO sobre fondo claro (links, slots, botón secundario). Es más oscura que el fill porque el primario del rubro suele quedar en ~4.2:1 sobre el lienzo gris. Regla: fill = --au-primary, texto = --au-primary-text. */ --au-primary-text: #0068b0; /* HIP: -1 punto de luminancia sobre #0077c8 */ --au-primary-soft: #ddedf8; /* = Integramédica, textual */ --au-secondary: #0d1846; /* = Integramédica navy (autoridad: navbar/títulos, NO botón) */ --au-secondary-content:#ffffff; --au-accent: #008089; /* = RedSalud teal */ --au-accent-content: #ffffff; --au-accent-soft: #e6f6f5; /* = Clínica Alemana, textual */ /* ---- 3. ACENTO "IA" (AURELIAI) ----------------------------------------- Regla de marca: el violeta AURELIAI NUNCA es el primario de una demo. Vive sólo en badges de IA, estados "generado por el agente" y gráficos. Precedente de que no es cuerpo extraño: Dentalink declara --secondary-100:#521ee6 y Dentrix un secundario violeta #ac89ff. -------- */ --au-ai: #521ee6; /* = Dentalink --secondary-100 */ --au-ai-soft: #efe1ff; /* = AgendaPro, textual */ --au-ai-content: #ffffff; /* ---- 4. SEVERIDAD CLÍNICA (Helsinki HDS, MIT) -------------------------- Trío por nivel: color / fondo suave / variante de texto accesible. ------ */ --au-info: #0062b9; --au-info-bg: #e5eff8; --au-info-text: #004f94; --au-success: #007a64; --au-success-bg: #e2f5f3; --au-success-text: #006250; --au-warning: #ffda07; --au-warning-bg: #fff4b4; --au-warning-text: #8a5a00; /* HDS da #c27900, pensado sobre blanco: sobre su propio tint da 3.13:1, así que se oscurece */ --au-error: #b01038; --au-error-bg: #f6e2e6; --au-error-text: #8d0d2d; /* Alias daisyUI */ --au-info-content: #ffffff; --au-success-content: #ffffff; --au-warning-content: #17222b; /* el amarillo HDS pide texto oscuro */ --au-error-content: #ffffff; /* Semáforo operativo (turnos / cumplimiento). Ratios calculados sobre blanco en research/cuidado-domiciliario.md §6: 5.13 / 5.00 / 6.57. El "atrasado" es naranja quemado y no amarillo justamente para pasar AA. */ --au-status-ok: #0e7c66; --au-status-late: #b3541e; --au-status-missed: #b42318; --au-status-ok-bg: #e3f4ef; --au-status-late-bg: #fef6f0; /* HIP: aclarado para que #b3541e pase 4.68:1 encima */ --au-status-missed-bg: #fde8e6; /* ---- 5. TIPOGRAFÍA ----------------------------------------------------- Cada tema vertical redefine --au-font-display / --au-font-body. Siempre con fallback de sistema: la demo tiene que verse bien sin red. -- */ --au-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --au-font-display: var(--au-font-body); --au-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* Escala. Cuerpo 17px (NIA/NLM: 12-14pt ≈ 16-19px; NHS body 19/16px). NINGÚN texto por debajo de 14px en una demo de salud. */ --au-text-xs: 0.875rem; /* 14px — piso absoluto */ --au-text-sm: 0.9375rem; /* 15px — etiquetas */ --au-text-base: 1.0625rem; /* 17px — cuerpo */ --au-text-lg: 1.1875rem; /* 19px — cuerpo NHS desktop / lead */ --au-text-xl: 1.5rem; --au-text-2xl: 2rem; --au-text-3xl: 2.5rem; --au-text-4xl: 3rem; --au-leading-tight: 1.2; --au-leading-body: 1.5; /* NHS: 1.5 en cuerpo */ --au-weight-normal: 400; --au-weight-medium: 500; --au-weight-semibold: 600; --au-weight-bold: 700; /* ---- 6. ESPACIADO (escala NHS.UK 4→64) --------------------------------- */ --au-space-1: 4px; --au-space-2: 8px; --au-space-3: 12px; --au-space-4: 16px; --au-space-5: 24px; --au-space-6: 32px; --au-space-7: 40px; --au-space-8: 48px; --au-space-9: 64px; /* ---- 7. FORMA ----------------------------------------------------------- Un tema premium usa UN radio. Un tema masivo puede permitirse la escala. (research/dental.md §4, estetica §3: la diferencia visible entre "clínica cara" y "clínica de barrio" es la disciplina de la paleta y el radio.) --- */ --au-radius-sm: 6px; --au-radius: 8px; --au-radius-lg: 12px; --au-radius-xl: 24px; --au-radius-pill: 999px; /* ---- 8. SOMBRA --------------------------------------------------------- El rubro casi no usa sombra dura. Grande, difusa, de baja opacidad y TINTADA del primario (Dentalink #c0d2df3d, Dentally #050a4d0d, Oral-B #cbe1f8). Nunca rgba(0,0,0,.5). --------------------------------------- */ --au-shadow-tint: 35 41 100; /* RGB del tinte; lo pisa el tema */ --au-shadow-sm: 0 1px 2px rgb(var(--au-shadow-tint) / .06); --au-shadow: 0 2px 8px rgb(var(--au-shadow-tint) / .08); --au-shadow-lg: 0 8px 40px rgb(var(--au-shadow-tint) / .12); /* ---- 9. ACCESIBILIDAD -------------------------------------------------- - Área táctil: WCAG 2.2 SC 2.5.8 exige 24px en AA; los líderes de cuidado usan 44-48 (manos con temblor/artritis). Acá el piso es 44 y el cómodo 48. - Contraste: AA = 4.5:1 texto normal, 3:1 texto grande (>=18.66px bold / >=24px). Verificado por script, ver README §Verificación. - Foco: siempre visible, 3px, nunca outline:none sin reemplazo. --------- */ --au-touch-min: 44px; --au-touch-comfortable: 48px; --au-focus-width: 3px; --au-focus-color: var(--au-primary); --au-focus-offset: 2px; /* ---- 10. LAYOUT --------------------------------------------------------- */ --au-container: 1200px; --au-container-narrow: 720px; /* lectura larga / formulario */ } /* ============================ RESET MÍNIMO ================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--au-font-body); font-size: var(--au-text-base); line-height: var(--au-leading-body); color: var(--au-base-content); background: var(--au-base-200); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--au-font-display); line-height: var(--au-leading-tight); margin: 0 0 var(--au-space-3); color: var(--au-secondary); /* Regla NHS/NIA: capitalización normal. NUNCA text-transform:uppercase en títulos — las guías de lectores mayores lo desaconsejan explícitamente. */ text-transform: none; } h1 { font-size: var(--au-text-3xl); font-weight: var(--au-weight-bold); } h2 { font-size: var(--au-text-2xl); font-weight: var(--au-weight-bold); } h3 { font-size: var(--au-text-xl); font-weight: var(--au-weight-semibold); } p { margin: 0 0 var(--au-space-4); } a { color: var(--au-primary-text); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--au-focus-width) solid var(--au-focus-color); outline-offset: var(--au-focus-offset); border-radius: var(--au-radius-sm); } /* Utilidad: texto sólo para lectores de pantalla. La usa el care card NHS para el prefijo oculto de severidad ("No urgente:" / "Urgente:" / "Emergencia:"). */ .au-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }