/* ─── PACS Health — Design Tokens compartidos ────────────────────────────── Fuente única de verdad para colores, espaciado y tipografía de toda la plataforma. Antes de este archivo, cada una de las 7 páginas HTML tenía su propio bloque :root, con dos paletas ligeramente distintas conviviendo (confirmado — no solo nombres de variable distintos, valores de color distintos). Unificado con criterio explícito por token, no por "familia ganadora completa" — ver bitácora para el razonamiento de cada decisión. ──────────────────────────────────────────────────────────────────────── */ :root { /* Fondo y superficies — jerarquía visual clara entre fondo y tarjetas */ --bg: #0F1117; --surface: #1A1D27; --surface2: #22263A; --border: #2A2D3A; --border2: #1E2130; /* Texto — 3 niveles de prominencia */ --text: #E8EAF0; --text-dim: #8B90A0; --text-muted: #6B7280; /* Acento — resaltes, bordes activos, badges */ --accent: #4A9EFF; --accent-dim: #1E3A5F; /* Marca — botones sólidos primarios (base + estado hover) */ --brand-primary: #2980B9; --brand-dark: #1B4F72; /* Estado — tonos estándar de la industria, no neón */ --success: #22C55E; --warning: #F59E0B; --error: #EF4444; /* 24-jul-2026: variables RGB compañeras — necesarias para construir rgba(var(--x-rgb), 0.08) en fondos tenues (filas resaltadas, badges con relleno suave) sin volver a escribir el valor hexadecimal a mano en cada plantilla. Mismos 3 colores de arriba, mismo valor, solo en formato "r, g, b" para poder controlar la opacidad por separado. Usado por primera vez en: badges/bordes de "urgente", "paciente en sitio", "posible duplicado de agendamiento" y "nota del tecnólogo" en operaciones.html/informes.html/portal.html. */ --success-rgb: 34, 197, 94; --warning-rgb: 245, 158, 11; --error-rgb: 239, 68, 68; /* 28-jul-2026: compañera RGB de --accent (#4A9EFF), agregada al construir los avisos de "estudio disponible para reclamar" y "motivo de la corrección" en informes.html. Mismo criterio que las tres de arriba: mismo color, solo en formato "r, g, b" para poder graduar la opacidad sin hardcodear el hexadecimal en cada plantilla. */ --accent-rgb: 74, 158, 255; /* ─── 20-ago-2026 — Frente C: sistema de 2 capas para los 77 colores hardcodeados encontrados en toda la plataforma ("Design Tokens" en el sentido formal — mismo patrón que Material Design/Tailwind). CAPA 1 (primitivos) = el color físico, sin significado. CAPA 2 (semánticos) = lo que ya existía arriba (--success/--warning/--error), ahora con fondo y borde propios en vez de que cada badge nuevo reinvente el tono. Separar las 2 capas es lo que permite, a futuro, cambiar de tema o de marca redefiniendo solo la Capa 1, sin tocar ningún componente. Valores elegidos = el más usado real de cada familia (confirmado por rol CSS real -- background/border/color -- no solo por parecido de tono), así que este cambio es 100% invisible visualmente: mismo pixel exacto, solo centralizado. ÚNICA excepción visual real de todo este frente: el bug de la agenda (ver operaciones.html) donde en_lectura/recibido estaban invertidos respecto al mapa real de estados -- eso sí cambia, porque hoy muestra el color equivocado. */ /* Capa 1 — Primitivos */ --pacs-red-zone: #1A0A0A; /* zona restringida (Purga, cédula admin) */ --pacs-red-alert: #2A0A0A; /* alerta transitoria de error -- rol distinto, no es lo mismo */ --pacs-red-border: #3A1A1A; /* borde de zona restringida -- el más usado, x24 */ --pacs-red-border-alert: #4A1A1A; --pacs-green-900: #0D2A0D; --pacs-green-700: #1A4A1A; --pacs-amber-900: #3A1F00; --pacs-amber-700: #3A2A1A; --pacs-amber-alert: #2A1A00; /* alerta transitoria -- rol distinto del badge/estado */ --pacs-amber-alert-border: #4A3000; --pacs-purple-900: #2A1A3A; --pacs-purple-700: #3A1A4A; --pacs-blue-900: #0D1F33; --pacs-blue-700: #1B3A5C; /* Primitivos de impresión -- SOLO referencia/documentación. Las 2 plantillas PDF (informe_pdf_template.html, reporte_operativo_pdf_template.html) NO cargan este archivo ni usan var() -- wkhtmltopdf no garantiza soporte de variables CSS, confirmado y revertido explícitamente el 20-ago-2026. Estos 3 valores están hardcodeados como hex literal en esos 2 archivos a propósito; quedan documentados acá para que una futura plantilla PDF los reutilice a mano en vez de inventar un gris nuevo. */ --pacs-print-gray-100: #F7F7F7; --pacs-print-gray-200: #F2F2F2; --pacs-print-gray-300: #E5E5E5; /* Capa 2 — Semánticos */ --success-bg: var(--pacs-green-900); --success-border: var(--pacs-green-700); --success-hover-bg: #0A2A0A; /* rol propio -- hover necesita su propio matiz para dar señal de interactividad, colapsarlo a success-bg lo habría eliminado */ --success-highlight: #4AFF9E; /* texto brillante sobre badge (medico/activo) */ /* 20-ago-2026 -- hallazgo real durante el análisis: "alerta de error" (.alert-error, aparece y desaparece) y "zona restringida" (Purga, corrección de cédula, nav de peligro -- estilo permanente de una sección sensible) se PARECÍAN por tono pero cumplen roles distintos. Forzarlos al mismo token habría perdido esa distinción real. */ --error-bg: var(--pacs-red-alert); --error-border: var(--pacs-red-border-alert); --error-hover-bg: #2A0E0E; --danger-zone-bg: var(--pacs-red-zone); --danger-zone-border: var(--pacs-red-border); --danger-zone-hover-bg: #1A0808; --error-text-muted: #8B5555; /* etiquetas de texto dentro de zona de Purga */ --warning-bg: var(--pacs-amber-900); --warning-border: var(--pacs-amber-700); --warning-alert-bg: var(--pacs-amber-alert); --warning-alert-border: var(--pacs-amber-alert-border); --info-bg: var(--pacs-blue-900); --info-border: var(--pacs-blue-700); /* 5º estado real de la plataforma (en_lectura) -- sin ningún token hasta hoy, pese a tener su propio color consistente en estadoColores (admin.html) desde antes. */ --status-lectura: #A855F7; --status-lectura-bg: var(--pacs-purple-900); --status-lectura-border: var(--pacs-purple-700); /* Forma y tipografía */ --radius: 6px; --radius-lg: 10px; --font: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; }