/* ============================================================ SIADME — Design tokens D-043, D-085, D-086 ============================================================ */ /* ---- Base tokens (no temáticos): tipografía, espaciado, radios, sombras, transiciones ---- */ :root { /* Tipografía */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-md: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.25rem; /* 20 */ --fs-2xl: 1.5rem; /* 24 */ --fs-3xl: 1.875rem; /* 30 */ --lh-tight: 1.2; --lh-base: 1.5; --lh-loose: 1.75; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Espaciado (escala lineal 4px) */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-16: 4rem; /* 64 */ /* Radios */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-full: 9999px; /* Sombras */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12); /* Transiciones */ --t-fast: 120ms ease; --t-base: 180ms ease; --t-slow: 280ms ease; /* Z-index */ --z-dropdown: 100; --z-sticky: 200; --z-modal-bg: 900; --z-modal: 1000; --z-toast: 1100; /* Container widths */ --w-narrow: 560px; --w-default: 1100px; --w-wide: 1440px; /* Layout */ --header-h: 56px; --sidebar-w: 240px; --sidebar-w-collapsed: 64px; /* Superficies elevadas/hover extra. Antes se usaban con fallback hardcodeado (var(--c-surface-2, #fafafa) / var(--c-surface-3, #eef2f7)), que rompía en temas oscuros. Ahora apuntan a --c-surface-hover, que cada tema define → resuelven al valor correcto por tema (neutro en los claros, oscuro en densa). */ /* surface-2 = superficie elevada en reposo (casi-blanca, como el viejo fallback #fafafa/#f8fafc): cards heads, filas, subtotales. surface-3 = estado hover (un punto más marcado). */ --c-surface-2: var(--c-surface-alt); --c-surface-3: var(--c-surface-hover); /* Alias usados en algunas pantallas con fallback claro hardcodeado (var(--c-border-soft, #eee) / var(--c-bg-alt, #f3f4f6)). Se definen acá apuntando a tokens reales por tema → válidos siempre y adaptan a densa. */ --c-border-soft: var(--c-border); --c-bg-alt: var(--c-surface-alt); } /* ============================================================ TEMAS — D-086 Cada tema redefine las variables semánticas de color. Se activan con [data-theme="..."] en o . ============================================================ */ /* ---- Tema 1: clinico-clasico (default) ---- */ :root, [data-theme="clinico-clasico"] { --c-primary: #1E5AAB; --c-primary-hover: #174988; --c-primary-soft: #E6EEF9; --c-primary-contrast: #FFFFFF; --c-bg: #F5F7FA; --c-surface: #FFFFFF; --c-surface-alt: #F9FAFC; --c-surface-hover: #EEF2F7; --c-text: #1A1F2E; --c-text-muted: #5A6577; --c-text-soft: #8993A4; --c-text-on-primary: #FFFFFF; --c-border: #E2E8F0; --c-border-strong: #C9D2DF; --c-success: #22A871; --c-success-soft: #E1F5EC; --c-warning: #D88C1F; --c-warning-soft: #FBF1DD; --c-danger: #D14343; --c-danger-soft: #FBE4E4; --c-info: #3A82E8; --c-info-soft: #E4EEFB; /* Primera vez del paciente con ese médico. Violeta a propósito: es el único hueco que quedaba en la paleta. En la fila de indicadores de la agenda ya conviven ámbar (sobreturno, falta orden), verde (autorización) y azul (info + los badges de estado), así que un azul más se perdía entre ellos. Se declara sólo acá: ningún tema lo pisa salvo los dos oscuros. */ --c-primeravez: #7A3FBF; --c-primeravez-soft: #F1E9FB; /* Estados de turno (vienen de la lógica) */ --c-st-reservado: #6B7B95; --c-st-confirmado: #1E5AAB; --c-st-presente: #D88C1F; --c-st-atendido: #22A871; --c-st-cancelado: #8993A4; --c-st-ausente: #D14343; } /* ---- Tema 2: azul-claro — paleta del logo Ipensa ---- Azul medio (del ícono persona) + dorado oliva (del texto "Ipensa") como acentos. El resto (success, warning, danger) mantiene tonos semánticos compatibles con la paleta. */ [data-theme="azul-claro"] { --c-primary: #1F7AB5; /* azul Ipensa */ --c-primary-hover: #155F8E; --c-primary-soft: #DDECF6; --c-primary-contrast: #FFFFFF; --c-accent: #9C8348; /* dorado oliva Ipensa (acento secundario) */ --c-accent-hover: #7E6936; --c-accent-soft: #F1ECDD; --c-bg: #F3F8FB; --c-surface: #FFFFFF; --c-surface-alt: #F7FAFC; --c-surface-hover: #E9F2F8; --c-text: #112233; --c-text-muted: #4E6275; --c-text-soft: #80909E; --c-text-on-primary: #FFFFFF; --c-border: #D6E3EC; --c-border-strong: #B8CBD7; --c-success: #22A871; --c-success-soft: #DCF3E7; --c-warning: #C28A2F; /* dorado más cálido, alineado con el acento */ --c-warning-soft: #F4E9CE; --c-danger: #CC3F3F; --c-danger-soft: #FADEDE; --c-info: #1F7AB5; --c-info-soft: #DDECF6; --c-st-reservado: #6B7B95; --c-st-confirmado: #1F7AB5; --c-st-presente: #C28A2F; --c-st-atendido: #22A871; --c-st-cancelado: #8993A4; --c-st-ausente: #CC3F3F; } /* ---- Tema 3: azul-medio (más saturado) ---- */ [data-theme="azul-medio"] { --c-primary: #1F4DD8; --c-primary-hover: #163FB6; --c-primary-soft: #E4EAFB; --c-primary-contrast: #FFFFFF; --c-bg: #F1F4FB; --c-surface: #FFFFFF; --c-surface-alt: #F7F9FD; --c-surface-hover: #E9EEF8; --c-text: #15192B; --c-text-muted: #525D7A; --c-text-soft: #828CA5; --c-text-on-primary: #FFFFFF; --c-border: #DCE2F0; --c-border-strong: #BFC8DF; --c-success: #1FA168; --c-success-soft: #DAF1E5; --c-warning: #D88C1F; --c-warning-soft: #FBF1DD; --c-danger: #D03B3B; --c-danger-soft: #FBDFDF; --c-info: #1F4DD8; --c-info-soft: #E4EAFB; --c-st-reservado: #6F7796; --c-st-confirmado: #1F4DD8; --c-st-presente: #D88C1F; --c-st-atendido: #1FA168; --c-st-cancelado: #8993A4; --c-st-ausente: #D03B3B; } /* ---- Tema 4: azul-oscuro (marino sobre crema) ---- */ [data-theme="azul-oscuro"] { --c-primary: #0F2D5E; --c-primary-hover: #0A2147; --c-primary-soft: #DCE4F1; --c-primary-contrast: #FFFFFF; --c-bg: #FAF8F3; --c-surface: #FFFFFF; --c-surface-alt: #FCFAF6; --c-surface-hover: #F1EEE5; --c-text: #15192B; --c-text-muted: #4B5468; --c-text-soft: #7A8398; --c-text-on-primary: #FFFFFF; --c-border: #E4DFD2; --c-border-strong: #CCC4B1; --c-success: #1F8859; --c-success-soft: #DCEEE4; --c-warning: #B6741D; --c-warning-soft: #F4E3C9; --c-danger: #B53636; --c-danger-soft: #F2D7D7; --c-info: #0F2D5E; --c-info-soft: #DCE4F1; --c-st-reservado: #6F7796; --c-st-confirmado: #0F2D5E; --c-st-presente: #B6741D; --c-st-atendido: #1F8859; --c-st-cancelado: #8993A4; --c-st-ausente: #B53636; } /* ============================================================ TEMAS ARCILLA — familia con estética física "clay" Cada uno define los tokens semánticos estándar (--c-*) + tokens extras consumidos por app-clay.css: --c-clay-card / --c-clay-elev-from / --c-clay-elev-to --c-clay-shadow / --c-clay-shadow-h / --c-clay-shadow-i --c-clay-text / --c-clay-text-soft / --c-clay-press --mk-1..6 (paleta marcador para cintas laterales) --mk-danger / --mk-info / --mk-success ============================================================ */ /* ---- Tema 5: arcilla (cálido base — terracota + crema) ---- */ [data-theme="arcilla"] { --c-primary: #B85A3E; --c-primary-hover: #A04F35; --c-primary-soft: #F5E0D6; --c-primary-contrast: #FFFFFF; --c-bg: #F1EAE0; --c-surface: #F8F2E8; --c-surface-alt: #FBF6EE; --c-surface-hover: #EBE2D4; --c-text: #2E2A23; --c-text-muted: #6B5F50; --c-text-soft: #8A8071; --c-text-on-primary: #FFFFFF; --c-border: #DCD0AF; --c-border-strong: #C9B98F; --c-success: #4A6B3F; --c-success-soft: #DCE9D2; --c-warning: #B07A1F; --c-warning-soft: #F2EBD8; --c-danger: #A03A30; --c-danger-soft: #F2DAD3; --c-info: #2A5F8F; --c-info-soft: #D8E2EE; --c-st-reservado: #8A8071; --c-st-confirmado: #B85A3E; --c-st-presente: #B07A1F; --c-st-atendido: #4A6B3F; --c-st-cancelado: #B5AC97; --c-st-ausente: #A03A30; /* Tokens específicos Clay */ --c-clay-card: #F8F2E8; --c-clay-elev-from: #FBF6EE; --c-clay-elev-to: #EDE2D0; --c-clay-shadow: rgba(110, 80, 50, 0.16); --c-clay-shadow-h: rgba(255, 255, 255, 0.9); --c-clay-shadow-i: rgba(110, 80, 50, 0.08); --c-clay-text: #6B3F26; --c-clay-text-soft: #8A6A4E; --c-clay-press: #B85A3E; --mk-1: #7A93B5; --mk-2: #82A085; --mk-3: #C49565; --mk-4: #A8895C; --mk-5: #9F89A8; --mk-6: #7A9FA0; --mk-danger: #B07268; --mk-info: #7A93B5; --mk-success: #82A085; } /* ---- Tema 6: arcilla-azul (azul pastel) ---- */ [data-theme="arcilla-azul"] { --c-primary: #5A7FB5; --c-primary-hover: #496EA0; --c-primary-soft: #DDE6F1; --c-primary-contrast: #FFFFFF; --c-bg: #E8EEF5; --c-surface: #F2F6FB; --c-surface-alt: #F8FAFD; --c-surface-hover: #DDE6F0; --c-text: #1F2840; --c-text-muted: #5A6680; --c-text-soft: #8590A8; --c-text-on-primary: #FFFFFF; --c-border: #C9D6E5; --c-border-strong: #A8BBD0; --c-success: #4A7B5C; --c-success-soft: #DCE9DE; --c-warning: #B08A3A; --c-warning-soft: #F2EBD8; --c-danger: #A65450; --c-danger-soft: #F2DCDA; --c-info: #5A7FB5; --c-info-soft: #DDE6F1; --c-st-reservado: #8590A8; --c-st-confirmado: #5A7FB5; --c-st-presente: #B08A3A; --c-st-atendido: #4A7B5C; --c-st-cancelado: #ACB5C2; --c-st-ausente: #A65450; --c-clay-card: #F2F6FB; --c-clay-elev-from: #FBFCFE; --c-clay-elev-to: #E5ECF5; --c-clay-shadow: rgba(60, 85, 130, 0.16); --c-clay-shadow-h: rgba(255, 255, 255, 0.9); --c-clay-shadow-i: rgba(60, 85, 130, 0.08); --c-clay-text: #2E3F58; --c-clay-text-soft: #5C6A82; --c-clay-press: #5A7FB5; --mk-1: #5A7FB5; --mk-2: #6FA28A; --mk-3: #B5926E; --mk-4: #8A85A8; --mk-5: #A37888; --mk-6: #6F9FA8; --mk-danger: #A65450; --mk-info: #5A7FB5; --mk-success: #6FA28A; } /* ---- Tema 7: arcilla-verde (verde pastel) ---- */ [data-theme="arcilla-verde"] { --c-primary: #5C8A6B; --c-primary-hover: #4A7257; --c-primary-soft: #DDE9DE; --c-primary-contrast: #FFFFFF; --c-bg: #E8EFE8; --c-surface: #F2F7F1; --c-surface-alt: #F8FAF7; --c-surface-hover: #DDE6DA; --c-text: #1F2D22; --c-text-muted: #5A6A5C; --c-text-soft: #859285; --c-text-on-primary: #FFFFFF; --c-border: #C9D8C5; --c-border-strong: #A8BCA3; --c-success: #5C8A6B; --c-success-soft: #DDE9DE; --c-warning: #B08A3A; --c-warning-soft: #F2EBD8; --c-danger: #A55448; --c-danger-soft: #F2DCD3; --c-info: #5A85A8; --c-info-soft: #DDE5ED; --c-st-reservado: #859285; --c-st-confirmado: #5C8A6B; --c-st-presente: #B08A3A; --c-st-atendido: #5C8A6B; --c-st-cancelado: #ACB5AC; --c-st-ausente: #A55448; --c-clay-card: #F2F7F1; --c-clay-elev-from: #FAFCF9; --c-clay-elev-to: #E5ECE2; --c-clay-shadow: rgba(70, 95, 75, 0.16); --c-clay-shadow-h: rgba(255, 255, 255, 0.9); --c-clay-shadow-i: rgba(70, 95, 75, 0.08); --c-clay-text: #2E4031; --c-clay-text-soft: #5C6E5E; --c-clay-press: #5C8A6B; --mk-1: #5A85A8; --mk-2: #5C8A6B; --mk-3: #B5926E; --mk-4: #A88C5C; --mk-5: #9F89A8; --mk-6: #6FA8A0; --mk-danger: #A55448; --mk-info: #5A85A8; --mk-success: #5C8A6B; } /* ---- Tema 8: arcilla-blanco (blanco + grises minimalista) ---- */ [data-theme="arcilla-blanco"] { --c-primary: #4A5260; --c-primary-hover: #383F4A; --c-primary-soft: #E2E5EA; --c-primary-contrast: #FFFFFF; --c-bg: #ECECEE; --c-surface: #F5F5F7; --c-surface-alt: #FAFAFB; --c-surface-hover: #E0E0E3; --c-text: #1F2228; --c-text-muted: #5A5E68; --c-text-soft: #8A8E98; --c-text-on-primary: #FFFFFF; --c-border: #D4D4D8; --c-border-strong: #B5B5BC; --c-success: #5A7560; --c-success-soft: #DDE3DE; --c-warning: #A8843A; --c-warning-soft: #EFEAD8; --c-danger: #985450; --c-danger-soft: #EFDCDA; --c-info: #5A7090; --c-info-soft: #DCE2EA; --c-st-reservado: #8A8E98; --c-st-confirmado: #4A5260; --c-st-presente: #A8843A; --c-st-atendido: #5A7560; --c-st-cancelado: #ACAEB5; --c-st-ausente: #985450; --c-clay-card: #F5F5F7; --c-clay-elev-from: #FBFBFC; --c-clay-elev-to: #E8E8EB; --c-clay-shadow: rgba(50, 55, 65, 0.14); --c-clay-shadow-h: rgba(255, 255, 255, 0.95); --c-clay-shadow-i: rgba(50, 55, 65, 0.06); --c-clay-text: #2E323A; --c-clay-text-soft: #5C6068; --c-clay-press: #4A5260; --mk-1: #5A7090; --mk-2: #5A7560; --mk-3: #A8843A; --mk-4: #8E8E98; --mk-5: #9082A0; --mk-6: #6F8A8E; --mk-danger: #985450; --mk-info: #5A7090; --mk-success: #5A7560; } /* ============================================================ FAMILIA BENTO (V100) — tarjetas redondeadas + Plus Jakarta + íconos pastel multicolor. La FORMA la aplica app-bento.css con [data-theme^="bento"]; acá solo van los tokens de color. Las 4 comparten los --mk-* (íconos coloridos) y se distinguen por --c-primary + el fondo (--c-bg). ============================================================ */ /* ---- Tema 9: bento (Salvia · crema cálido) ---- */ [data-theme="bento"] { --c-primary: #5E9277; --c-primary-hover: #4E7D64; --c-primary-soft: #DEEAE0; --c-primary-contrast: #FFFFFF; --c-bg: #FBF8F3; --c-surface: #FFFFFF; --c-surface-alt: #FCFAF6; --c-surface-hover: #F4EFE6; --c-text: #2A2D3A; --c-text-muted: #6C7185; --c-text-soft: #9AA0B0; --c-text-on-primary: #FFFFFF; --c-border: #ECE6DC; --c-border-strong: #DBD2C4; --c-success: #2E8B40; --c-success-soft: #DEEAE0; --c-warning: #C57730; --c-warning-soft: #FCE9D0; --c-danger: #C0392B; --c-danger-soft: #FADCD0; --c-info: #3A7CA5; --c-info-soft: #DCEAF2; --c-st-reservado: #6C7185; --c-st-confirmado: #5E9277; --c-st-presente: #C57730; --c-st-atendido: #2E8B40; --c-st-cancelado: #9AA0B0; --c-st-ausente: #C0392B; --mk-1: #7BA88F; --mk-2: #E8896E; --mk-3: #C57730; --mk-4: #B79EBF; --mk-5: #7C9BC9; --mk-6: #D08FA0; --mk-danger: #E8896E; --mk-info: #7C9BC9; --mk-success: #7BA88F; } /* ---- Tema 10: bento-coral (Coral · crema cálido) ---- */ [data-theme="bento-coral"] { --c-primary: #D26A4F; --c-primary-hover: #B85740; --c-primary-soft: #FADCD0; --c-primary-contrast: #FFFFFF; --c-bg: #FBF6F2; --c-surface: #FFFFFF; --c-surface-alt: #FDF8F4; --c-surface-hover: #F4E9E2; --c-text: #2A2D3A; --c-text-muted: #6C7185; --c-text-soft: #9AA0B0; --c-text-on-primary: #FFFFFF; --c-border: #EEE1DA; --c-border-strong: #DDCcC2; --c-success: #2E8B40; --c-success-soft: #DEEAE0; --c-warning: #C57730; --c-warning-soft: #FCE9D0; --c-danger: #C0392B; --c-danger-soft: #FADCD0; --c-info: #3A7CA5; --c-info-soft: #DCEAF2; --c-st-reservado: #6C7185; --c-st-confirmado: #D26A4F; --c-st-presente: #C57730; --c-st-atendido: #2E8B40; --c-st-cancelado: #9AA0B0; --c-st-ausente: #C0392B; --mk-1: #7BA88F; --mk-2: #E8896E; --mk-3: #C57730; --mk-4: #B79EBF; --mk-5: #7C9BC9; --mk-6: #D08FA0; --mk-danger: #E8896E; --mk-info: #7C9BC9; --mk-success: #7BA88F; } /* ---- Tema 11: bento-gris (Gris · fondo neutro, íconos coloridos) ---- */ [data-theme="bento-gris"] { --c-primary: #5B6B7F; --c-primary-hover: #4A586A; --c-primary-soft: #E0E4EA; --c-primary-contrast: #FFFFFF; --c-bg: #EDEFF2; --c-surface: #FFFFFF; --c-surface-alt: #F7F8FA; --c-surface-hover: #E3E6EB; --c-text: #2A2D3A; --c-text-muted: #6C7185; --c-text-soft: #9AA0B0; --c-text-on-primary: #FFFFFF; --c-border: #DDE1E7; --c-border-strong: #C7CCD5; --c-success: #2E8B40; --c-success-soft: #DEEAE0; --c-warning: #C57730; --c-warning-soft: #FCE9D0; --c-danger: #C0392B; --c-danger-soft: #FADCD0; --c-info: #3A7CA5; --c-info-soft: #DCEAF2; --c-st-reservado: #6C7185; --c-st-confirmado: #5B6B7F; --c-st-presente: #C57730; --c-st-atendido: #2E8B40; --c-st-cancelado: #9AA0B0; --c-st-ausente: #C0392B; --mk-1: #7BA88F; --mk-2: #E8896E; --mk-3: #C57730; --mk-4: #B79EBF; --mk-5: #7C9BC9; --mk-6: #D08FA0; --mk-danger: #E8896E; --mk-info: #7C9BC9; --mk-success: #7BA88F; } /* ---- Tema 12: bento-celeste (Celeste · fresco, íconos coloridos) ---- */ [data-theme="bento-celeste"] { --c-primary: #3A7CA5; --c-primary-hover: #2F6688; --c-primary-soft: #DCEAF4; --c-primary-contrast: #FFFFFF; --c-bg: #E8F1F9; --c-surface: #FFFFFF; --c-surface-alt: #F4F9FD; --c-surface-hover: #DCE9F4; --c-text: #21384D; --c-text-muted: #5A6B7D; --c-text-soft: #90A0B0; --c-text-on-primary: #FFFFFF; --c-border: #D2E0EC; --c-border-strong: #B9CEDF; --c-success: #2E8B40; --c-success-soft: #DDEAE0; --c-warning: #C57730; --c-warning-soft: #FAEBD6; --c-danger: #C0392B; --c-danger-soft: #F7D9D3; --c-info: #3A7CA5; --c-info-soft: #DCEAF4; --c-st-reservado: #5A6B7D; --c-st-confirmado: #3A7CA5; --c-st-presente: #C57730; --c-st-atendido: #2E8B40; --c-st-cancelado: #90A0B0; --c-st-ausente: #C0392B; --mk-1: #7BA88F; --mk-2: #E8896E; --mk-3: #C57730; --mk-4: #B79EBF; --mk-5: #7C9BC9; --mk-6: #D08FA0; --mk-danger: #E8896E; --mk-info: #7C9BC9; --mk-success: #7BA88F; } /* ---- Tema 17: bento-cacao (Terracota · crema cálido) — V162 ---------- Quinta de la familia bento; se sumó después, de ahí el número suelto. Es bento-coral con el naranja bajado a terracota, para que el chrome deje de pelearse con el logo de la clínica (Breast — Clínica de la Mama), que es marrón. El marrón del logo está medido, no estimado: #643128, promedio del núcleo de la tinta del JPG (6.649 px sólidos, descartando el antialias del borde; los modales caen en #69352A / #5F322C / #6C3129, así que el promedio representa un color real). Ese valor se probó como --c-primary y quedó DEMASIADO oscuro para un banner que ocupa el ancho de la pantalla. Lo que quedó es el punto intermedio: #9F5441, mismo hue del logo (h≈11°) con la luminosidad subida de 27% a 44%. Emparenta con el logo sin que la cabecera se convierta en una banda marrón. Contraste del banner, medido en el extremo CLARO del degradé (el peor caso: color-mix 75% con blanco, que es donde cae el "Hola, X"): el coral daba 2,5:1 y este da 3,3:1. El título es texto grande, así que pasa AA (3:1); el --c-text-on-primary sobre el color base va 5,5:1. El único --mk-* que se toca es el 2: #E8896E era el salmón que hacía juego con el coral y acá se confundía con el primary. */ [data-theme="bento-cacao"] { --c-primary: #9F5441; --c-primary-hover: #834134; --c-primary-soft: #F5E7E0; --c-primary-contrast: #FFFFFF; --c-bg: #FBF6F2; --c-surface: #FFFFFF; --c-surface-alt: #FDF8F4; --c-surface-hover: #F3E9E3; --c-text: #2A2D3A; --c-text-muted: #6C7185; --c-text-soft: #9AA0B0; --c-text-on-primary: #FFFFFF; --c-border: #EEE1DA; --c-border-strong: #DDCCC2; --c-success: #2E8B40; --c-success-soft: #DEEAE0; --c-warning: #C57730; --c-warning-soft: #FCE9D0; --c-danger: #C0392B; --c-danger-soft: #FADCD0; --c-info: #3A7CA5; --c-info-soft: #DCEAF2; --c-st-reservado: #6C7185; --c-st-confirmado: #9F5441; --c-st-presente: #C57730; --c-st-atendido: #2E8B40; --c-st-cancelado: #9AA0B0; --c-st-ausente: #C0392B; --mk-1: #7BA88F; --mk-2: #C9806B; --mk-3: #C57730; --mk-4: #B79EBF; --mk-5: #7C9BC9; --mk-6: #D08FA0; --mk-danger: #C0503A; --mk-info: #7C9BC9; --mk-success: #7BA88F; } /* ============================================================ FAMILIA DENSA (V119) — "workstation / data-dense". Chrome compacto, sidebar tipo navy, tablas y KPIs densos. La FORMA la aplica app-densa.css con [data-theme^="densa"]; acá solo van los tokens de color. 2 OSCURAS (densa, densa-midnight) — primer modo oscuro del sistema: --c-bg/--c-surface oscuros, *-soft tintados en oscuro. 2 CLARAS (densa-clear, densa-sage). Además de los tokens estándar, cada paleta define el "chrome" del sidebar (consumido por app-densa.css): --c-nav (fondo) / --c-nav-strong / --c-nav-ink / --c-nav-mut --c-nav-hover / --c-nav-active-bg / --c-nav-line ============================================================ */ /* ---- Tema 13: densa (Slate · oscura, teal) ---- */ [data-theme="densa"] { --c-primary: #19A89B; --c-primary-hover: #22BCAD; --c-primary-soft: #143A38; --c-primary-contrast: #04201C; --c-bg: #101820; --c-surface: #18222B; --c-surface-alt: #1F2A34; --c-surface-hover: #243441; --c-text: #DCE5EB; --c-text-muted: #8FA0AC; --c-text-soft: #677785; --c-text-on-primary: #04201C; --c-border: #2C3A45; --c-border-strong: #3C4D5A; --c-success: #3FC393; --c-success-soft: #16312A; --c-warning: #E2A646; --c-warning-soft: #352B18; --c-danger: #E96573; --c-danger-soft: #381F25; --c-info: #57A8DE; --c-info-soft: #152C3B; --c-primeravez: #B48AE8; --c-primeravez-soft: #2A1F3D; --c-st-reservado: #8FA0AC; --c-st-confirmado: #19A89B; --c-st-presente: #E2A646; --c-st-atendido: #3FC393; --c-st-cancelado: #677785; --c-st-ausente: #E96573; --mk-1: #57A8DE; --mk-2: #3FC393; --mk-3: #E2A646; --mk-4: #C7A06A; --mk-5: #AE8AE8; --mk-6: #3FB6C9; --mk-danger: #E96573; --mk-info: #57A8DE; --mk-success: #3FC393; --c-nav: #0C141B; --c-nav-strong: #FFFFFF; --c-nav-ink: #A7B6BF; --c-nav-mut: #697882; --c-nav-hover: rgba(255,255,255,0.06); --c-nav-active-bg: rgba(25,168,155,0.22); --c-nav-line: rgba(255,255,255,0.08); } /* ---- Tema 14: densa-midnight (Midnight · oscura, azul) ---- */ [data-theme="densa-midnight"] { --c-primary: #3F8FE0; --c-primary-hover: #57A0EC; --c-primary-soft: #173050; --c-primary-contrast: #04121F; --c-bg: #0D1626; --c-surface: #152135; --c-surface-alt: #1B2840; --c-surface-hover: #213050; --c-text: #D6DFEC; --c-text-muted: #8B9AB4; --c-text-soft: #62718E; --c-text-on-primary: #04121F; --c-border: #293650; --c-border-strong: #3A4A68; --c-success: #48C98F; --c-success-soft: #123528; --c-warning: #E4AA48; --c-warning-soft: #352C18; --c-danger: #EC6675; --c-danger-soft: #381E26; --c-info: #3F8FE0; --c-info-soft: #14263E; --c-primeravez: #AE85E6; --c-primeravez-soft: #241C38; --c-st-reservado: #8B9AB4; --c-st-confirmado: #3F8FE0; --c-st-presente: #E4AA48; --c-st-atendido: #48C98F; --c-st-cancelado: #62718E; --c-st-ausente: #EC6675; --mk-1: #3F8FE0; --mk-2: #48C98F; --mk-3: #E4AA48; --mk-4: #C79B6A; --mk-5: #A98BEA; --mk-6: #46B7CF; --mk-danger: #EC6675; --mk-info: #3F8FE0; --mk-success: #48C98F; --c-nav: #0A1322; --c-nav-strong: #FFFFFF; --c-nav-ink: #AAB6CC; --c-nav-mut: #6A7791; --c-nav-hover: rgba(255,255,255,0.06); --c-nav-active-bg: rgba(63,143,224,0.24); --c-nav-line: rgba(255,255,255,0.08); } /* ---- Tema 15: densa-clear (Clear · clara, azul) ---- */ [data-theme="densa-clear"] { --c-primary: #1C6FB5; --c-primary-hover: #15527F; --c-primary-soft: #DBEAF5; --c-primary-contrast: #FFFFFF; --c-bg: #F4F7FB; --c-surface: #FFFFFF; --c-surface-alt: #EDF2F8; --c-surface-hover: #E5EEF7; --c-text: #16202B; --c-text-muted: #5A6776; --c-text-soft: #8693A1; --c-text-on-primary: #FFFFFF; --c-border: #D6DFE9; --c-border-strong: #BBC8D6; --c-success: #0A7C55; --c-success-soft: #DCF3E9; --c-warning: #B0640C; --c-warning-soft: #FBEEDC; --c-danger: #B82532; --c-danger-soft: #FBDDE1; --c-info: #1C6FB5; --c-info-soft: #DBEAF5; --c-st-reservado: #6B7B95; --c-st-confirmado: #1C6FB5; --c-st-presente: #B0640C; --c-st-atendido: #0A7C55; --c-st-cancelado: #8E99A8; --c-st-ausente: #B82532; --mk-1: #3F7FBE; --mk-2: #2E9E78; --mk-3: #C9842E; --mk-4: #A8895C; --mk-5: #8466C4; --mk-6: #2E8FA6; --mk-danger: #C0473F; --mk-info: #3F7FBE; --mk-success: #2E9E78; --c-nav: #EEF3F8; --c-nav-strong: #15202B; --c-nav-ink: #46586A; --c-nav-mut: #8593A2; --c-nav-hover: rgba(20,40,60,0.06); --c-nav-active-bg: rgba(28,111,181,0.14); --c-nav-line: rgba(20,40,60,0.10); } /* ---- Tema 16: densa-sage (Sage · clara, verde-teal) ---- */ [data-theme="densa-sage"] { --c-primary: #2E7D6B; --c-primary-hover: #1F5B4E; --c-primary-soft: #DBEEE7; --c-primary-contrast: #FFFFFF; --c-bg: #F5F7F4; --c-surface: #FFFFFF; --c-surface-alt: #EBF0EC; --c-surface-hover: #E4EFE8; --c-text: #16201A; --c-text-muted: #5A6A60; --c-text-soft: #87958B; --c-text-on-primary: #FFFFFF; --c-border: #D6DFD7; --c-border-strong: #BCC8BD; --c-success: #1F7D54; --c-success-soft: #DBF1E5; --c-warning: #9C6410; --c-warning-soft: #F7EBD6; --c-danger: #B23341; --c-danger-soft: #F8DCDF; --c-info: #127C84; --c-info-soft: #D8F0F1; --c-st-reservado: #7C8A80; --c-st-confirmado: #2E7D6B; --c-st-presente: #9C6410; --c-st-atendido: #1F7D54; --c-st-cancelado: #9AA89E; --c-st-ausente: #B23341; --mk-1: #4E8FA0; --mk-2: #2E9E78; --mk-3: #C9842E; --mk-4: #A0895C; --mk-5: #7E66B8; --mk-6: #2E8F84; --mk-danger: #B5414E; --mk-info: #4E8FA0; --mk-success: #2E9E78; --c-nav: #E7EEEA; --c-nav-strong: #15241D; --c-nav-ink: #46584E; --c-nav-mut: #84938A; --c-nav-hover: rgba(20,50,38,0.06); --c-nav-active-bg: rgba(46,125,107,0.16); --c-nav-line: rgba(20,50,38,0.10); }