/* ========================================================================== SPA OCULAR · tokens.css Sistema de diseño. Marca registrada del Dr. Juan Batlle. Clínica de ojo seco y superficie ocular. Santo Domingo, RD. Generado en Claude Design y aprobado por Alcides el 13-sep-2026. Sustituye la paleta provisional sin tocar ninguna plantilla: los nombres del contrato original (--marca, --texto, --e4...) siguen existiendo al final, ahora apuntando a la escala real. Dos bloques: 1. ESCALA · --color-*-NNN, la fuente de verdad. Se elige de aquí. 2. CONTRATO · alias que ya usan las plantillas Django. No se renombran. Regla de legibilidad: ningún color de texto de este fichero baja de 4.5:1 sobre blanco. Los pacientes son mayores de 50 y llegan con los ojos irritados. La legibilidad manda sobre la estética. ========================================================================== */ :root { /* --------------------------------------------------------------------- 1. COLOR · MARCA Teal profundo y desaturado. Es el color del agua y de la superficie ocular, pero apagado a propósito: una consulta bien iluminada, no un spa de hotel. No es el color del centro anfitrión. --------------------------------------------------------------------- */ --color-marca-50: #f2f8f9; --color-marca-100: #e1eff1; --color-marca-200: #c2dfe2; --color-marca-300: #94c6cc; --color-marca-400: #5ea5ae; --color-marca-500: #35848f; --color-marca-600: #17646e; /* base. Texto y relleno. 6.9:1 sobre blanco */ --color-marca-700: #145661; /* texto pequeño garantizado. 8.3:1 */ --color-marca-800: #10454e; --color-marca-900: #0c343a; /* --------------------------------------------------------------------- COLOR · ACENTO Arcilla cálida. Solo en el sitio de marketing y en marcas de sección. Nunca para acciones ni para estados: ese trabajo es del teal y de los cuatro estados. Si aparece en dos sitios de una pantalla, sobra uno. --------------------------------------------------------------------- */ --color-acento-50: #fbf5ee; --color-acento-100: #f5e8d8; --color-acento-200: #e9cfb0; --color-acento-300: #d9ae7e; --color-acento-400: #c08a4f; --color-acento-500: #a06d34; --color-acento-600: #85592a; /* 6.1:1 sobre blanco */ --color-acento-700: #6b4722; /* --------------------------------------------------------------------- COLOR · NEUTROS Grises con una pizca del teal de marca, para que blanco y gris pertenezcan a la misma familia y no se vean sucios uno al lado del otro. --------------------------------------------------------------------- */ --color-neutro-0: #ffffff; --color-neutro-25: #fafbfb; --color-neutro-50: #f4f7f7; --color-neutro-100: #e9eeef; --color-neutro-200: #d7dfe0; --color-neutro-300: #b9c5c7; --color-neutro-400: #8d9c9e; /* solo para iconografía y bordes, nunca texto */ --color-neutro-500: #5f7073; /* mínimo legal para texto. 5.2:1 */ --color-neutro-600: #48585b; /* 7.6:1 */ --color-neutro-700: #35464a; --color-neutro-800: #243437; --color-neutro-900: #142528; /* texto principal. 14.8:1 */ /* --------------------------------------------------------------------- COLOR · ESTADOS Cuatro colores para siete estados de la agenda. El color dice la categoría, la palabra dice el estado. Nunca el color solo: se acompaña siempre de texto. éxito Confirmado · Atendido aviso Pendiente · Reprogramado error No asistió · Cancelado activo En sala --------------------------------------------------------------------- */ /* El 600 es el relleno y el punto. El 700 es el texto cuando va encima del 100, que es el caso de la etiqueta, la celda de tabla y el aviso. */ --color-exito-600: #1a6b44; /* 6.6:1 sobre blanco */ --color-exito-700: #145c3a; /* 7.9:1 sobre blanco · 6.8:1 sobre exito-100 */ --color-exito-100: #e7f3ec; --color-exito-200: #bedcc9; --color-aviso-600: #8a5200; /* 6.4:1 */ --color-aviso-700: #7a4900; /* 7.6:1 sobre blanco · 6.4:1 sobre aviso-100 */ --color-aviso-100: #fbf2df; --color-aviso-200: #ebd8ae; --color-error-600: #a02622; /* 7.5:1 */ --color-error-700: #8f221e; /* 8.9:1 sobre blanco · 7.8:1 sobre error-100 */ --color-error-100: #fbebea; --color-error-200: #f0c7c4; --color-activo-600: #17646e; /* hereda de marca a propósito */ --color-activo-700: #10454e; /* 10.6:1 sobre blanco · 9.4:1 sobre activo-100 */ --color-activo-100: #e1eff1; --color-activo-200: #c2dfe2; /* --------------------------------------------------------------------- COLOR · SEMÁNTICO Lo que se usa al escribir una pantalla. Nadie escribe --color-neutro-900 en una plantilla: escribe --color-texto. --------------------------------------------------------------------- */ --color-fondo: var(--color-neutro-0); --color-fondo-suave: var(--color-neutro-50); --color-superficie: var(--color-neutro-0); --color-superficie-alt: var(--color-neutro-25); --color-borde: var(--color-neutro-200); --color-borde-fuerte: var(--color-neutro-300); --color-texto: var(--color-neutro-900); --color-texto-suave: var(--color-neutro-600); --color-texto-tenue: var(--color-neutro-500); --color-texto-sobre-marca: var(--color-neutro-0); --color-enlace: var(--color-marca-700); --color-enlace-hover: var(--color-marca-900); /* --------------------------------------------------------------------- 2. TIPOGRAFÍA Source Sans 3 en todo el producto. Humanista, de altura de x alta, con acentos y eñe bien dibujados, y legible a 16 px en pantalla de teléfono con brillo bajo. Lora solo en titulares del sitio de marketing. En la aplicación no entra: ahí todo es Source Sans 3. --------------------------------------------------------------------- */ --fuente-base: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fuente-titulo: "Lora", Georgia, "Times New Roman", serif; --fuente-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Cuerpo grande por perfil de paciente. El base son 17 px, no 16. 16 px es el suelo, no el objetivo. */ --texto-xs: 0.8125rem; /* 13 px. Solo metadatos. Nunca cuerpo ni etiqueta de campo */ --texto-sm: 0.9375rem; /* 15 px. Suelo de tabla densa del panel */ --texto-base: 1.0625rem; /* 17 px. Interfaz de la aplicación */ --texto-lg: 1.1875rem; /* 19 px. Cuerpo de lo que lee el paciente */ --texto-xl: 1.4375rem; /* 23 px */ --texto-2xl: 1.75rem; /* 28 px */ --texto-3xl: 2.25rem; /* 36 px */ --texto-4xl: 3rem; /* 48 px. Titular del sitio */ --peso-normal: 400; --peso-medio: 500; --peso-fuerte: 600; --peso-negro: 700; --linea-apretada: 1.2; /* titulares de 28 px o más */ --linea-media: 1.35; /* titulares pequeños y etiquetas */ --linea: 1.6; /* cuerpo */ --linea-suelta: 1.75; /* párrafos largos del sitio */ --letra-apretada: -0.015em; /* titulares grandes */ --letra-normal: 0; --letra-ancha: 0.06em; /* versalitas de sección */ /* --------------------------------------------------------------------- 3. ESPACIADO · escala de 4 Ningún relleno es un número inventado. --------------------------------------------------------------------- */ --e1: 0.25rem; /* 4 px */ --e2: 0.5rem; /* 8 px */ --e3: 0.75rem; /* 12 px */ --e4: 1rem; /* 16 px */ --e5: 1.5rem; /* 24 px */ --e6: 2rem; /* 32 px */ --e7: 3rem; /* 48 px */ --e8: 4rem; /* 64 px */ --e9: 6rem; /* 96 px */ /* Área de toque. No se baja de aquí en ninguna superficie táctil. */ --toque-min: 48px; /* --------------------------------------------------------------------- 4. RADIOS --------------------------------------------------------------------- */ --radio-sm: 6px; --radio: 10px; --radio-lg: 16px; --radio-pastilla: 999px; /* --------------------------------------------------------------------- 5. SOMBRAS Teñidas con el teal de marca para que pertenezcan a la paleta. Dos niveles y nada más. Si algo necesita un tercero, no necesita sombra: necesita un borde. --------------------------------------------------------------------- */ --sombra-sm: 0 1px 2px rgba(20, 37, 40, 0.06), 0 1px 3px rgba(20, 37, 40, 0.04); --sombra: 0 2px 6px rgba(20, 37, 40, 0.08), 0 4px 12px rgba(20, 37, 40, 0.05); --sombra-lg: 0 8px 24px rgba(20, 37, 40, 0.1), 0 2px 6px rgba(20, 37, 40, 0.06); /* --------------------------------------------------------------------- 6. FOCO Contorno sólido de 3 px, no un halo difuso. Se ve con los ojos irritados y sobrevive al modo de alto contraste de Windows. --------------------------------------------------------------------- */ --foco-color: var(--color-marca-600); --foco-grosor: 3px; --foco-margen: 2px; --foco: var(--foco-grosor) solid var(--foco-color); /* Sobre fondo teal, el contorno lleva blanco por dentro para no perderse */ --foco-inverso: var(--foco-grosor) solid var(--color-neutro-0); /* --------------------------------------------------------------------- 7. MOVIMIENTO Y MEDIDAS Corto y sin rebote. Esto es una clínica. --------------------------------------------------------------------- */ --transicion: 140ms cubic-bezier(0.22, 1, 0.36, 1); --ancho-lectura: 34rem; /* portal del paciente */ --ancho-texto: 62ch; /* párrafo del sitio */ --ancho-panel: 76rem; /* escritorio del personal */ } /* ========================================================================== CONTRATO CON LAS PLANTILLAS Nombres que las plantillas y app.css ya usan. Se conservan tal cual para que la llegada del sistema de diseño no toque ni una pantalla. ========================================================================== */ :root { --marca: var(--color-marca-600); --marca-oscura: var(--color-marca-800); --marca-clara: var(--color-marca-100); --acento: var(--color-acento-600); --fondo: var(--color-fondo); --fondo-suave: var(--color-fondo-suave); --superficie: var(--color-superficie); --borde: var(--color-borde); --texto: var(--color-texto); --texto-suave: var(--color-texto-suave); --texto-tenue: var(--color-texto-tenue); /* 🔴 Faltaba el alias corto, y su ausencia no se ve: una `var()` que no resuelve hace que el navegador DESCARTE la declaración entera y el elemento se queda con el color que heredaba. Pasó con el enlace que marca el recorrido guiado: fondo teal y letra casi negra, contraste 2,33 cuando la norma pide 4,5. Ninguna prueba lo veía; se vio mirándolo. */ --texto-sobre-marca: var(--color-texto-sobre-marca); --exito: var(--color-exito-600); --exito-texto: var(--color-exito-700); --exito-fondo: var(--color-exito-100); --exito-borde: var(--color-exito-200); --aviso: var(--color-aviso-600); --aviso-texto: var(--color-aviso-700); --aviso-fondo: var(--color-aviso-100); --aviso-borde: var(--color-aviso-200); --error: var(--color-error-600); --error-texto: var(--color-error-700); --error-fondo: var(--color-error-100); --error-borde: var(--color-error-200); --activo: var(--color-activo-600); --activo-texto: var(--color-activo-700); --activo-fondo: var(--color-activo-100); --activo-borde: var(--color-activo-200); --fuente: var(--fuente-base); --anillo-foco: 0 0 0 var(--foco-grosor) var(--foco-color); --demo-fondo: #4b2e83; --demo-texto: #ffffff; } @media (prefers-reduced-motion: reduce) { :root { --transicion: 0ms; } }