/*==================================================== CIMA — Temas de interfaz Cuatro temas: auto (default), glass, dark, light Se activa con data-theme="..." en =====================================================*/ /* ── Auto — sigue el esquema del OS ─────────────── */ @media (prefers-color-scheme: dark) { html[data-theme="auto"] { --text-main: #f1f5f9; --text-muted: rgba(241,245,249,0.72); --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="auto"] .glass-panel, html[data-theme="auto"] .main-workspace { backdrop-filter: none !important; } } @media (prefers-color-scheme: light) { html[data-theme="auto"] { --text-main: #1e293b; --text-muted: rgba(30,41,59,0.75); --glass-opacity: 0.92; --glass-blur: 16px; --glass-bg: rgba(210,218,232,0.92); --glass-border: rgba(0,0,0,0.10); --surface-bg: rgba(220,228,240,0.96); --input-bg: rgba(238,243,250,0.98); --input-border: rgba(0,0,0,0.18); --btn-ghost-bg: rgba(0,0,0,0.06); --btn-ghost-hover: rgba(0,0,0,0.12); --chip-bg: rgba(0,0,0,0.08); --chip-active-bg: rgba(29,78,216,0.18); --drawer-bg: rgba(230,236,246,0.98); --scrollbar-thumb: rgba(0,0,0,0.18); --shadow: 0 4px 20px rgba(0,0,0,0.12); } html[data-theme="auto"] .glass-panel { box-shadow: 0 2px 12px rgba(0,0,0,0.08); } html[data-theme="auto"] .btn-ghost, html[data-theme="auto"] .scroll-btn { color: var(--text-main); border-color: var(--glass-border); } html[data-theme="auto"] .form-input, html[data-theme="auto"] .form-select { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text-main) !important; } html[data-theme="auto"] .chip { background: var(--chip-bg); color: var(--text-main); border: 1px solid var(--glass-border); } html[data-theme="auto"] .chip.active { background: var(--chip-active-bg); color: var(--primary); } } /* ── Liquid Glass (default / glass) ──────────────── */ :root, html[data-theme="glass"] { --text-main: #fff; --text-muted: rgba(255,255,255,0.82); --glass-opacity: 0.22; --glass-blur: 24px; --glass-bg-rgb: 20,20,35; --glass-bg: rgba(var(--glass-bg-rgb),var(--glass-opacity)); --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); } /* ── Color Sólido ─────────────────────────────────── */ /* Igual que Liquid Glass pero opaco: el "Tinte del Cristal" define el color de cards/barras/drawers/headers. Sin blur ni transparencia. */ html[data-theme="solid"] { --text-main: #fff; --text-muted: rgba(255,255,255,0.82); --glass-opacity: 1; --glass-blur: 0px; --glass-bg-rgb: 24,24,40; --glass-bg: rgb(var(--glass-bg-rgb)); --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: rgb(var(--glass-bg-rgb)); --scrollbar-thumb: rgba(255,255,255,0.18); --shadow: 0 8px 32px rgba(0,0,0,0.35); } html[data-theme="solid"] .glass-panel, html[data-theme="solid"] .main-workspace { backdrop-filter: none !important; } /* ── Oscuro ──────────────────────────────────────── */ html[data-theme="dark"] { --text-main: #f1f5f9; --text-muted: rgba(241,245,249,0.72); --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.75); --glass-opacity: 0.92; --glass-blur: 16px; --glass-bg: rgba(210,218,232,0.92); --glass-border: rgba(0,0,0,0.10); --surface-bg: rgba(220,228,240,0.96); --input-bg: rgba(238,243,250,0.98); --input-border: rgba(0,0,0,0.18); --btn-ghost-bg: rgba(0,0,0,0.06); --btn-ghost-hover: rgba(0,0,0,0.12); --chip-bg: rgba(0,0,0,0.08); --chip-active-bg: rgba(29,78,216,0.18); --drawer-bg: rgba(230,236,246,0.98); --scrollbar-thumb: rgba(0,0,0,0.18); --shadow: 0 4px 20px rgba(0,0,0,0.12); } /* 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: auto; min-height: 60px; transition: height 0.15s ease; } @supports (field-sizing: content) { textarea.form-input, textarea.auto-resize { overflow-y: hidden; field-sizing: content; } } /* ── Fondo automático (eliminado — siempre usa wallpaper seleccionado) ── */ /* ── Fondos animados ─────────────────────────────────── */ #cima-bg-anim { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } /* Aurora borealis */ .cima-anim-aurora { background: #060612; } .cima-anim-aurora::before, .cima-anim-aurora::after { content: ''; position: absolute; inset: -40%; filter: blur(50px); animation: _caur 14s ease-in-out infinite alternate; } .cima-anim-aurora::before { background: radial-gradient(ellipse 80% 55% at 25% 50%, rgba(0,220,130,0.45), transparent 65%), radial-gradient(ellipse 65% 45% at 75% 40%, rgba(29,120,240,0.45), transparent 65%), radial-gradient(ellipse 55% 65% at 50% 75%, rgba(0,140,255,0.38), transparent 65%); } .cima-anim-aurora::after { background: radial-gradient(ellipse 90% 50% at 65% 30%, rgba(20,100,240,0.32), transparent 60%), radial-gradient(ellipse 60% 60% at 20% 65%, rgba(0,200,220,0.28), transparent 60%); animation-delay: -7s; animation-direction: alternate-reverse; } @keyframes _caur { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(8%,5%) scale(1.08); } 66% { transform: translate(-5%,8%) scale(0.95); } 100% { transform: translate(4%,-6%) scale(1.05); } } /* Mesh vivo */ .cima-anim-mesh { background: linear-gradient(-45deg, #0a0f2e, #1a0a2e, #0a1f3d, #0f2a1a, #2a0a0f); background-size: 400% 400%; animation: _cmesh 18s ease infinite; } @keyframes _cmesh { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Cosmos twinkling */ .cima-anim-cosmos { background: radial-gradient(ellipse at 50% 60%, #1a0a2e 0%, #020408 70%); } .cima-anim-cosmos::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle 1.5px at 12% 28%, rgba(255,255,255,0.9), transparent), radial-gradient(circle 1px at 47% 12%, rgba(255,255,255,0.7), transparent), radial-gradient(circle 2px at 73% 62%, rgba(255,255,255,0.6), transparent), radial-gradient(circle 1px at 88% 38%, rgba(255,255,255,0.85), transparent), radial-gradient(circle 1px at 22% 78%, rgba(255,255,255,0.5), transparent), radial-gradient(circle 1.5px at 58% 88%, rgba(255,255,255,0.7), transparent), radial-gradient(circle 1px at 35% 52%, rgba(255,255,255,0.8), transparent), radial-gradient(circle 2px at 81% 82%, rgba(255,255,255,0.6), transparent), radial-gradient(circle 1px at 64% 22%, rgba(255,220,180,0.7), transparent), radial-gradient(circle 1px at 5% 48%, rgba(200,220,255,0.6), transparent), radial-gradient(ellipse 35% 25% at 60% 45%, rgba(100,60,200,0.18), transparent); animation: _ccos 4s ease-in-out infinite alternate; } @keyframes _ccos { 0% { opacity: 0.75; transform: scale(1); } 100% { opacity: 1; transform: scale(1.008); } } /* Ondas geométricas */ .cima-anim-waves { background: #06060f; } .cima-anim-waves::before, .cima-anim-waves::after { content: ''; position: absolute; inset: -50%; border-radius: 42%; animation: _cwav 10s linear infinite; } .cima-anim-waves::before { background: rgba(29,78,216,0.08); animation-duration: 10s; } .cima-anim-waves::after { background: rgba(192,132,252,0.06); animation-duration: 14s; animation-direction: reverse; } @keyframes _cwav { 0% { transform: rotate(0deg) translate(8%,8%) scale(1.1); } 100% { transform: rotate(360deg) translate(8%,8%) scale(1.1); } } /* Neón pulsante */ .cima-anim-neon { background: #020814; } .cima-anim-neon::before { content: ''; position: absolute; inset: -30%; background: radial-gradient(ellipse 60% 40% at 20% 55%, rgba(29,78,216,0.38), transparent 60%), radial-gradient(ellipse 50% 35% at 80% 40%, rgba(0,180,255,0.28), transparent 60%), radial-gradient(ellipse 40% 50% at 50% 80%, rgba(0,120,240,0.22), transparent 60%); filter: blur(35px); animation: _cneon 7s ease-in-out infinite alternate; } @keyframes _cneon { 0% { opacity: 0.55; transform: scale(0.93) rotate(-1deg); } 50% { opacity: 1; } 100% { opacity: 0.65; transform: scale(1.07) rotate(2deg); } }