/*==================================================== CIMA — Temas de interfaz Tres temas: glass (default), dark, light Se activa con data-theme="..." en =====================================================*/ /* ── Liquid Glass (default / glass) ──────────────── */ :root, html[data-theme="glass"] { --text-main: #fff; --text-muted: rgba(255,255,255,0.65); --glass-opacity: 0.22; --glass-blur: 24px; --glass-bg: rgba(20,20,35,0.22); --glass-border: rgba(255,255,255,0.12); --surface-bg: rgba(255,255,255,0.06); --input-bg: rgba(255,255,255,0.08); --input-border: rgba(255,255,255,0.18); --btn-ghost-bg: rgba(255,255,255,0.07); --btn-ghost-hover: rgba(255,255,255,0.14); --chip-bg: rgba(255,255,255,0.10); --chip-active-bg: rgba(29,78,216,0.35); --drawer-bg: rgba(12,12,24,0.88); --scrollbar-thumb: rgba(255,255,255,0.18); --shadow: 0 8px 32px rgba(0,0,0,0.35); } /* ── Oscuro ──────────────────────────────────────── */ html[data-theme="dark"] { --text-main: #f1f5f9; --text-muted: rgba(241,245,249,0.55); --glass-opacity: 0.85; --glass-blur: 0px; --glass-bg: rgba(15,15,25,0.92); --glass-border: rgba(255,255,255,0.08); --surface-bg: rgba(30,30,50,0.95); --input-bg: rgba(255,255,255,0.07); --input-border: rgba(255,255,255,0.12); --btn-ghost-bg: rgba(255,255,255,0.06); --btn-ghost-hover: rgba(255,255,255,0.12); --chip-bg: rgba(255,255,255,0.08); --chip-active-bg: rgba(29,78,216,0.5); --drawer-bg: rgba(10,10,20,0.97); --scrollbar-thumb: rgba(255,255,255,0.14); --shadow: 0 8px 24px rgba(0,0,0,0.6); } html[data-theme="dark"] .glass-panel { backdrop-filter: none !important; } html[data-theme="dark"] .main-workspace { backdrop-filter: none !important; } /* ── Claro ───────────────────────────────────────── */ html[data-theme="light"] { --text-main: #1e293b; --text-muted: rgba(30,41,59,0.55); --glass-opacity: 0.88; --glass-blur: 16px; --glass-bg: rgba(245,248,255,0.88); --glass-border: rgba(0,0,0,0.08); --surface-bg: rgba(255,255,255,0.95); --input-bg: rgba(255,255,255,0.95); --input-border: rgba(0,0,0,0.15); --btn-ghost-bg: rgba(0,0,0,0.05); --btn-ghost-hover: rgba(0,0,0,0.10); --chip-bg: rgba(0,0,0,0.06); --chip-active-bg: rgba(29,78,216,0.18); --drawer-bg: rgba(255,255,255,0.97); --scrollbar-thumb: rgba(0,0,0,0.16); --shadow: 0 4px 20px rgba(0,0,0,0.10); } /* Light: ajustar elementos que usan rgba(255,255,255,...) hardcoded */ html[data-theme="light"] .glass-panel { box-shadow: 0 2px 12px rgba(0,0,0,0.08); } html[data-theme="light"] .btn-ghost, html[data-theme="light"] .scroll-btn { color: var(--text-main); border-color: var(--glass-border); } html[data-theme="light"] .timeline-wrapper, html[data-theme="light"] .consult-tab, html[data-theme="light"] .patient-tab { border-color: var(--glass-border); } html[data-theme="light"] .form-input, html[data-theme="light"] .form-select { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text-main) !important; } html[data-theme="light"] .chip { background: var(--chip-bg); color: var(--text-main); border: 1px solid var(--glass-border); } html[data-theme="light"] .chip.active { background: var(--chip-active-bg); color: var(--primary); } /* ── Chips y botones responden al tema ───────────── */ .chip { background: var(--chip-bg, rgba(255,255,255,0.10)); transition: background 0.2s, color 0.2s; } .chip.active { background: var(--chip-active-bg, rgba(29,78,216,0.35)); } .btn-ghost { background: var(--btn-ghost-bg, rgba(255,255,255,0.07)); transition: background 0.2s; } .btn-ghost:hover { background: var(--btn-ghost-hover, rgba(255,255,255,0.14)); } /* ── Scrollbar global ────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb, rgba(255,255,255,0.18)); border-radius: 3px; } /* ── Textarea auto-resize ────────────────────────── */ textarea.form-input, textarea.auto-resize { resize: vertical; overflow-y: hidden; min-height: 60px; transition: height 0.15s ease; field-sizing: content; /* Chrome 123+ */ }