/* ============================================================================ ExpedienteGine — Themes Variables CSS por tema. Se aplican con: Importar DESPUÉS de tokens.css ============================================================================ */ /* ── clinical_minimal (DEFAULT) ───────────────────────────────────────────── */ [data-theme="clinical_minimal"], [data-theme="sistema"], :root { --color-bg-primary: #F9F3F0; --color-bg-secondary: #F3E9E5; --color-surface: #FFFFFF; --color-text-primary: #4A4E60; --color-text-secondary: #6C7282; --color-navy: #172E61; --color-accent: #4A9C96; --color-accent-soft: #E5F2F0; --color-accent-rgb: 74, 156, 150; --color-secondary: #A292C4; --color-secondary-soft: #F0ECF7; --color-olive: #9EB8A6; --color-border: rgba(162, 146, 196, .35); --color-error: #A33A3A; --color-success: #2F7D64; --color-warning: #A66A24; --color-sidebar-bg: #172E61; --color-sidebar-text: #F9F3F0; --color-sidebar-active: #4A9C96; --color-topbar-bg: #FFFFFF; --swatch-color: #4A9C96; } /* ── lila_menta ───────────────────────────────────────────────────────────── */ [data-theme="lila_menta"] { --color-bg-primary: #F8FAFC; --color-bg-secondary: #EEF4F8; --color-surface: #FFFFFF; --color-text-primary: #102A43; --color-text-secondary: #486581; --color-navy: #0B1F3A; --color-accent: #B9A7E8; --color-accent-soft: #EFEAFB; --color-accent-rgb: 185, 167, 232; --color-secondary: #A8DCC8; --color-secondary-soft: #E6F7F0; --color-olive: #7A8F68; --color-border: #D9E2EC; --color-error: #B42318; --color-success: #027A48; --color-warning: #B54708; --color-sidebar-bg: #0B1F3A; --color-sidebar-text: #C8D8E8; --color-sidebar-active: #B9A7E8; --color-topbar-bg: #FFFFFF; /* Swatch para selector */ --swatch-color: #B9A7E8; } /* ── claro_medico ─────────────────────────────────────────────────────────── */ [data-theme="claro_medico"] { --color-bg-primary: #FAFAFA; --color-bg-secondary: #F0F4F8; --color-surface: #FFFFFF; --color-text-primary: #1A202C; --color-text-secondary: #4A5568; --color-navy: #1A365D; --color-accent: #3182CE; --color-accent-soft: #EBF8FF; --color-accent-rgb: 49, 130, 206; --color-secondary: #48BB78; --color-secondary-soft: #F0FFF4; --color-olive: #68836A; --color-border: #E2E8F0; --color-error: #C53030; --color-success: #276749; --color-warning: #C05621; --color-sidebar-bg: #1A365D; --color-sidebar-text: #BEE3F8; --color-sidebar-active: #90CDF4; --color-topbar-bg: #FFFFFF; --swatch-color: #3182CE; } /* ── oscuro_medico ────────────────────────────────────────────────────────── */ [data-theme="oscuro_medico"] { --color-bg-primary: #0B0F19; --color-bg-secondary: #111622; --color-surface: #1C2333; --color-text-primary: #F8FAFC; --color-text-secondary: #94A3B8; --color-navy: #0B0F19; --color-accent: #9F7AEA; --color-accent-soft: #1F1A3A; --color-accent-rgb: 159, 122, 234; --color-secondary: #34D399; --color-secondary-soft: #064E3B; --color-olive: #A7F3D0; --color-border: #2E3A52; --color-error: #F87171; --color-success: #34D399; --color-warning: #FBBF24; --color-sidebar-bg: #070A10; --color-sidebar-text: #94A3B8; --color-sidebar-active: #9F7AEA; --color-topbar-bg: #111622; --swatch-color: #9F7AEA; --color-input-bg: #0B0F19; --color-input-border: #2E3A52; } /* ── azul_marino ─────────────────────────────────────────────────────────── */ [data-theme="azul_marino"] { --color-bg-primary: #EBF4FB; --color-bg-secondary: #D6E9F8; --color-surface: #FFFFFF; --color-text-primary: #0B1F3A; --color-text-secondary: #2C5282; --color-navy: #0B1F3A; --color-accent: #2B6CB0; --color-accent-soft: #BEE3F8; --color-accent-rgb: 43, 108, 176; --color-secondary: #4299E1; --color-secondary-soft: #EBF8FF; --color-olive: #3182CE; --color-border: #BEE3F8; --color-error: #C53030; --color-success: #2F855A; --color-warning: #C05621; --color-sidebar-bg: #0B1F3A; --color-sidebar-text: #BEE3F8; --color-sidebar-active: #63B3ED; --color-topbar-bg: #FFFFFF; --swatch-color: #2B6CB0; } /* ── verde_olivo ─────────────────────────────────────────────────────────── */ [data-theme="verde_olivo"] { --color-bg-primary: #F4F6F0; --color-bg-secondary: #E8EDE0; --color-surface: #FFFFFF; --color-text-primary: #1C2B1A; --color-text-secondary: #4A5D3A; --color-navy: #1C2B1A; --color-accent: #7A8F68; --color-accent-soft: #EAF0E4; --color-accent-rgb: 122, 143, 104; --color-secondary: #A8C090; --color-secondary-soft: #F0F5EA; --color-olive: #5C7245; --color-border: #C8D5BC; --color-error: #9B2C2C; --color-success: #276749; --color-warning: #97711A; --color-sidebar-bg: #1C2B1A; --color-sidebar-text: #C8D5BC; --color-sidebar-active: #A8C090; --color-topbar-bg: #FFFFFF; --swatch-color: #7A8F68; } /* ── minimalista_gris ────────────────────────────────────────────────────── */ [data-theme="minimalista_gris"] { --color-bg-primary: #F8F9FA; --color-bg-secondary: #E9ECEF; --color-surface: #FFFFFF; --color-text-primary: #212529; --color-text-secondary: #6C757D; --color-navy: #212529; --color-accent: #495057; --color-accent-soft: #F1F3F5; --color-accent-rgb: 73, 80, 87; --color-secondary: #ADB5BD; --color-secondary-soft: #F8F9FA; --color-olive: #6C757D; --color-border: #DEE2E6; --color-error: #DC3545; --color-success: #198754; --color-warning: #FD7E14; --color-sidebar-bg: #212529; --color-sidebar-text: #ADB5BD; --color-sidebar-active: #CED4DA; --color-topbar-bg: #FFFFFF; --swatch-color: #6C757D; } /* ── personalizado ───────────────────────────────────────────────────────── */ [data-theme="personalizado"] { --color-bg-primary: #F1F6FF; --color-bg-secondary: #DDE9FA; --color-surface: #FAFCFF; --color-text-primary: #172033; --color-text-secondary: #42526C; --color-navy: #1F2A44; --color-accent: #0F8B8D; --color-accent-soft: #DDF4F2; --color-accent-rgb: 15, 139, 141; --color-secondary: #F25C54; --color-secondary-soft: #FFE6E3; --color-olive: #5F7A63; --color-border: #BFD0E8; --color-error: #B42318; --color-success: #027A48; --color-warning: #B54708; --color-sidebar-bg: #1F2A44; --color-sidebar-text: #DCE8F8; --color-sidebar-active: #4DD0CF; --color-topbar-bg: #E7F1FF; --swatch-color: #0F8B8D; } /* ── personalizados adicionales ─────────────────────────────────────────── */ [data-theme="personalizado_aqua"] { --color-bg-primary: #E9FBFC; --color-bg-secondary: #C7EEF1; --color-surface: #F8FEFF; --color-text-primary: #0B3038; --color-text-secondary: #315D66; --color-navy: #08333B; --color-accent: #008C95; --color-accent-soft: #CFF4F2; --color-accent-rgb: 0, 140, 149; --color-secondary: #F2A900; --color-secondary-soft: #FFF0BF; --color-olive: #557A68; --color-border: #91D5DA; --color-error: #B42318; --color-success: #027A48; --color-warning: #A15C07; --color-sidebar-bg: #08333B; --color-sidebar-text: #C4F1F3; --color-sidebar-active: #F2A900; --color-topbar-bg: #D8F6F7; --swatch-color: #008C95; } [data-theme="personalizado_coral"] { --color-bg-primary: #FFF0E8; --color-bg-secondary: #F6D8CB; --color-surface: #FFFDFC; --color-text-primary: #33231F; --color-text-secondary: #6E4E45; --color-navy: #26324A; --color-accent: #D94F30; --color-accent-soft: #FFDCCF; --color-accent-rgb: 217, 79, 48; --color-secondary: #2364AA; --color-secondary-soft: #DDEBFA; --color-olive: #789262; --color-border: #E7B9AA; --color-error: #B42318; --color-success: #027A48; --color-warning: #B54708; --color-sidebar-bg: #26324A; --color-sidebar-text: #F4E4DE; --color-sidebar-active: #FF896E; --color-topbar-bg: #FFE1D5; --swatch-color: #D94F30; } [data-theme="personalizado_violeta"] { --color-bg-primary: #F1EEFF; --color-bg-secondary: #DDD6FF; --color-surface: #FDFBFF; --color-text-primary: #211A3D; --color-text-secondary: #554A7D; --color-navy: #211A3D; --color-accent: #6D3BEF; --color-accent-soft: #E5DDFF; --color-accent-rgb: 109, 59, 239; --color-secondary: #00A6A6; --color-secondary-soft: #D4F7F4; --color-olive: #8A9365; --color-border: #C5BBF2; --color-error: #B42318; --color-success: #027A48; --color-warning: #B54708; --color-sidebar-bg: #211A3D; --color-sidebar-text: #E2DCFF; --color-sidebar-active: #00C2C2; --color-topbar-bg: #E9E3FF; --swatch-color: #6D3BEF; } /* ── Swatches de colores para selector visual ────────────────────────────── */ .swatch-sistema { background: linear-gradient(135deg, #F9F3F0 0%, #4A9C96 50%, #1A202C 50%, #9F7AEA 100%); } .swatch-clinical_minimal { background: linear-gradient(135deg, #172E61 0%, #4A9C96 55%, #A292C4 100%); } .swatch-lila_menta { background: #B9A7E8; } .swatch-claro_medico { background: #3182CE; } .swatch-oscuro_medico { background: #9F7AEA; } .swatch-azul_marino { background: #2B6CB0; } .swatch-verde_olivo { background: #7A8F68; } .swatch-minimalista_gris{ background: #6C757D; } .swatch-personalizado { background: linear-gradient(135deg, #0F8B8D 0%, #F25C54 100%); } .swatch-personalizado_aqua { background: linear-gradient(135deg, #008C95 0%, #F2A900 100%); } .swatch-personalizado_coral { background: linear-gradient(135deg, #D94F30 0%, #2364AA 100%); } .swatch-personalizado_violeta { background: linear-gradient(135deg, #6D3BEF 0%, #00A6A6 100%); }