/*==================================================== 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-rgb: 15,15,25; --glass-bg: rgba(15,15,25,0.92); --surface-2: rgba(28,28,46,0.96); --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-rgb: 210,218,232; --glass-bg: rgba(210,218,232,0.92); --surface-2: rgba(236,241,248,0.98); --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"] { /* ════════════════════════════════════════════════════════════════════════ Tema LIQUID GLASS — combinación canónica calibrada con la config real de u001 (2026-06-27). Superficies transparentes (opacidad 0) que se vuelven cristal esmerilado solo por el blur; texto y acentos blancos. Al alterarlo un usuario, su copia va a su bucket y el tema pasa a "Personalizado"; estos son los valores de fábrica. ════════════════════════════════════════════════════════════════════════ */ --text-main: #fff; --text-muted: #fff; --glass-opacity: 0; --glass-blur: 29px; --glass-bg-rgb: 20,20,35; --glass-bg: rgba(var(--glass-bg-rgb),var(--glass-opacity)); --surface-2: rgba(var(--fr-subpanel-rgb, var(--glass-bg-rgb)), var(--fr-subpanel-op, calc(var(--glass-opacity) + 0.12))); --glass-border: rgba(255,255,255,0.18); --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); } /* ════════════════════════════════════════════════════════════════════════════ EXCLUSIVO de Liquid Glass — NO va en :root, si no contamina los temas Sólido/ Oscuro/Claro (que deben quedar OPACOS y SIN blur). El primario/acento blancos y el cristal-por-elemento son la combinación de u001. Sin estos overrides, los demás temas hacen fallback a su propio --glass-opacity (1) y --glass-blur (0) → superficies sólidas, como debe ser. ════════════════════════════════════════════════════════════════════════════ */ html[data-theme="glass"] { --primary: #ffffff; --accent: #d4d4d4; --fr-window-op: 0; --fr-interior-op: 0; --fr-title-op: 0.1; --fr-card-op: 0.03; --fr-card-blur: 0px; --fr-subpanel-op: 0; --fr-subpanel-blur: 0px; --fr-tile-op: 0.05; --fr-dock-op: 0; --fr-dockbtn-op: 0; --fr-subtoolbar-op: 0; --fr-tabhead-op: 0; --fr-subbtn-op: 0; --fr-subbtn-blur: 35px; --fr-dropdown-op: 0; --fr-drawer-op: 0; --fr-drawer-blur: 30px; --fr-modal-op: 0.1; --fr-modal-blur: 30px; --fr-modalbtn-op: 0.1; --fr-chip-rgb: 0,0,0; --fr-chip-op: 0; --fr-overlay-op: 0; --fr-overlay-blur: 14px; --fr-panel-op: 0; --fr-panel-rgb: 20,20,30; --fr-panel-blur: 0px; } /* ── 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; /* Sólido: opaco; la card se "levanta" con un tinte más claro (respeta el slider). */ --surface-2: rgba(44,44,68, var(--glass-opacity)); /* Card de color sólido: 100% por defecto, pero la barra de opacidad (--glass-opacity) SÍ aplica → tinte + opacidad independientes por tema. */ --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(var(--glass-bg-rgb),var(--glass-opacity)); --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; } /* Tipo SÓLIDO: campos de texto OPACOS (el token del tema define el color). */ html[data-theme="solid"] .form-input, html[data-theme="solid"] .form-select { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text-main) !important; } /* ════════════════════════════════════════════════════════════════════════════ TEMAS SÓLIDOS = SIN GLASS. En glass, muchos elementos usan var(--fr-X-op, 0) → en los temas sólidos esos --fr-*-op quedaban SIN definir y caían al fallback 0 (barra de título, interior, sub-barra, headers, drawers, dropdowns… TRANSPARENTES) mientras el contenedor era opaco → "elementos glass" colándose en el sólido. Aquí, para TODA la familia sólida (solid, solid-auto, claro, oscuro): superficies opacas (--fr-*-op:1) y CERO backdrop-filter. (overlay = atenuación tras modales, se deja moderada.) Mismo criterio que separó glass de sólido en SIMA. ════════════════════════════════════════════════════════════════════════════ */ html[data-theme="solid"], html[data-theme="solid-auto"], html[data-theme="light"], html[data-theme="dark"] { --fr-window-op: 1; --fr-interior-op: 1; --fr-title-op: 1; --fr-subtoolbar-op: 1; --fr-tabhead-op: 1; --fr-subbtn-op: 1; --fr-dropdown-op: 1; --fr-drawer-op: 1; --fr-dock-op: 1; --fr-dockbtn-op: 1; --fr-subpanel-op: 1; --fr-panel-op: 1; --fr-card-op: 1; --fr-tile-op: 1; --fr-modal-op: 1; --fr-modalbtn-op: 1; --fr-window-blur: 0; --fr-interior-blur: 0; --fr-title-blur: 0; --fr-card-blur: 0; --fr-subpanel-blur: 0; --fr-subbtn-blur: 0; --fr-drawer-blur: 0; --fr-modal-blur: 0; --fr-overlay-blur: 0; --fr-panel-blur: 0; } html[data-theme="solid"] *, html[data-theme="solid-auto"] *, html[data-theme="light"] *, html[data-theme="dark"] * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── Oscuro ──────────────────────────────────────── */ html[data-theme="dark"] { --text-main: #f1f5f9; --text-muted: rgba(241,245,249,0.72); --glass-opacity: 1; --glass-blur: 0px; --glass-bg-rgb: 15,15,25; --surface-2: rgba(28,28,46,1); --glass-bg: rgba(var(--glass-bg-rgb),var(--glass-opacity)); --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: 1; --glass-blur: 16px; --glass-bg-rgb: 210,218,232; --surface-2: rgba(236,241,248,1); --glass-bg: rgba(var(--glass-bg-rgb),var(--glass-opacity)); --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); } /* ════════════════════════════════════════════════════════════════════════════ MATRIZ DE TEMAS 2×3 — {Glass, Sólido} × {Auto, Claro, Oscuro} El usuario de CIMA SOLO selecciona; el editor avanzado (opacidad/desenfoque/ tinte por-elemento) vive en SIMA y publica estos sets. Cada tema es AUTOCONTENIDO (define su set completo) → el tema es la capa superior, sin que nada de usuario lo pise. Glass: glass-auto · glass (Liquid Glass, u001, CONGELADO) · glass-dark Sólido: solid-auto · light (Claro) · dark (Oscuro) 'auto' = sigue el esquema claro/oscuro del dispositivo (prefers-color-scheme). NOTA: los valores de Dark Glass son 1ª pasada → se afinan luego desde SIMA. ════════════════════════════════════════════════════════════════════════════ */ /* ── Dark Glass — cristal oscuro (misma familia que Liquid Glass, más cerrado) ── */ html[data-theme="glass-dark"] { --text-main: #fff; --text-muted: rgba(255,255,255,0.72); --glass-opacity: 0; --glass-blur: 30px; --glass-bg-rgb: 4,6,12; --glass-bg: rgba(var(--glass-bg-rgb),var(--glass-opacity)); --surface-2: rgba(var(--fr-subpanel-rgb, var(--glass-bg-rgb)), var(--fr-subpanel-op, calc(var(--glass-opacity) + 0.20))); --glass-border: rgba(255,255,255,0.12); --surface-bg: rgba(255,255,255,0.04); --input-bg: rgba(255,255,255,0.06); --input-border: rgba(255,255,255,0.14); --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.40); --drawer-bg: rgba(6,7,14,0.90); --scrollbar-thumb: rgba(255,255,255,0.16); --shadow: 0 8px 32px rgba(0,0,0,0.50); --primary: #ffffff; --accent: #cfcfcf; --fr-window-op: 0; --fr-interior-op: 0.30; --fr-title-op: 0.48; --fr-card-op: 0.42; --fr-card-blur: 6px; --fr-subpanel-op: 0; --fr-subpanel-blur: 0px; --fr-tile-op: 0.50; --fr-dock-op: 0.42; --fr-dockbtn-op: 0; --fr-subtoolbar-op: 0.30; --fr-tabhead-op: 0.30; --fr-subbtn-op: 0.30; --fr-subbtn-blur: 35px; --fr-dropdown-op: 0.55; --fr-drawer-op: 0.55; --fr-drawer-blur: 30px; --fr-modal-op: 0.55; --fr-modal-blur: 30px; --fr-modalbtn-op: 0.20; --fr-chip-rgb: 255,255,255; --fr-chip-op: 0.06; --fr-overlay-op: 0.28; --fr-overlay-blur: 14px; --fr-panel-op: 0.42; --fr-panel-rgb: 4,6,12; --fr-panel-blur: 0px; } /* ── Auto Glass — sigue el dispositivo: claro → Liquid Glass · oscuro → Dark Glass ── */ @media (prefers-color-scheme: light) { html[data-theme="glass-auto"] { --text-main:#fff; --text-muted:#fff; --glass-opacity:0; --glass-blur:29px; --glass-bg-rgb:20,20,35; --glass-bg:rgba(var(--glass-bg-rgb),var(--glass-opacity)); --surface-2:rgba(var(--fr-subpanel-rgb, var(--glass-bg-rgb)), var(--fr-subpanel-op, calc(var(--glass-opacity) + 0.12))); --glass-border:rgba(255,255,255,0.18); --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); --primary:#ffffff; --accent:#d4d4d4; --fr-window-op:0; --fr-interior-op:0; --fr-title-op:0.1; --fr-card-op:0.03; --fr-card-blur:0px; --fr-subpanel-op:0; --fr-subpanel-blur:0px; --fr-tile-op:0.05; --fr-dock-op:0; --fr-dockbtn-op:0; --fr-subtoolbar-op:0; --fr-tabhead-op:0; --fr-subbtn-op:0; --fr-subbtn-blur:35px; --fr-dropdown-op:0; --fr-drawer-op:0; --fr-drawer-blur:30px; --fr-modal-op:0.1; --fr-modal-blur:30px; --fr-modalbtn-op:0.1; --fr-chip-rgb:0,0,0; --fr-chip-op:0; --fr-overlay-op:0; --fr-overlay-blur:14px; --fr-panel-op:0; --fr-panel-rgb:20,20,30; --fr-panel-blur:0px; } } @media (prefers-color-scheme: dark) { html[data-theme="glass-auto"] { --text-main:#fff; --text-muted:rgba(255,255,255,0.72); --glass-opacity:0; --glass-blur:30px; --glass-bg-rgb:4,6,12; --glass-bg:rgba(var(--glass-bg-rgb),var(--glass-opacity)); --surface-2:rgba(var(--fr-subpanel-rgb, var(--glass-bg-rgb)), var(--fr-subpanel-op, calc(var(--glass-opacity) + 0.20))); --glass-border:rgba(255,255,255,0.12); --surface-bg:rgba(255,255,255,0.04); --input-bg:rgba(255,255,255,0.06); --input-border:rgba(255,255,255,0.14); --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.40); --drawer-bg:rgba(6,7,14,0.90); --scrollbar-thumb:rgba(255,255,255,0.16); --shadow:0 8px 32px rgba(0,0,0,0.50); --primary:#ffffff; --accent:#cfcfcf; --fr-window-op:0; --fr-interior-op:0.30; --fr-title-op:0.48; --fr-card-op:0.42; --fr-card-blur:6px; --fr-subpanel-op:0; --fr-subpanel-blur:0px; --fr-tile-op:0.50; --fr-dock-op:0.42; --fr-dockbtn-op:0; --fr-subtoolbar-op:0.30; --fr-tabhead-op:0.30; --fr-subbtn-op:0.30; --fr-subbtn-blur:35px; --fr-dropdown-op:0.55; --fr-drawer-op:0.55; --fr-drawer-blur:30px; --fr-modal-op:0.55; --fr-modal-blur:30px; --fr-modalbtn-op:0.20; --fr-chip-rgb:255,255,255; --fr-chip-op:0.06; --fr-overlay-op:0.28; --fr-overlay-blur:14px; --fr-panel-op:0.42; --fr-panel-rgb:4,6,12; --fr-panel-blur:0px; } } /* ── Auto Sólido — sigue el dispositivo: claro → Claro · oscuro → Oscuro ── */ @media (prefers-color-scheme: light) { html[data-theme="solid-auto"] { --text-main:#1e293b; --text-muted:rgba(30,41,59,0.75); --glass-opacity:1; --glass-blur:16px; --glass-bg-rgb:210,218,232; --surface-2:rgba(236,241,248,1); --glass-bg:rgba(var(--glass-bg-rgb),var(--glass-opacity)); --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="solid-auto"] .glass-panel { box-shadow: 0 2px 12px rgba(0,0,0,0.08); } html[data-theme="solid-auto"] .form-input, html[data-theme="solid-auto"] .form-select { background: var(--input-bg) !important; border-color: var(--input-border) !important; color: var(--text-main) !important; } } @media (prefers-color-scheme: dark) { html[data-theme="solid-auto"] { --text-main:#f1f5f9; --text-muted:rgba(241,245,249,0.72); --glass-opacity:1; --glass-blur:0px; --glass-bg-rgb:15,15,25; --surface-2:rgba(28,28,46,1); --glass-bg:rgba(var(--glass-bg-rgb),var(--glass-opacity)); --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="solid-auto"] .glass-panel, html[data-theme="solid-auto"] .main-workspace { backdrop-filter: none; } } /* ════════════════════════════════════════════════════════════════════════════ FAMILIA SÓLIDA (Claro / Oscuro / Auto Sólido) — superficies OPACAS + activo = REBORDE. Los temas glass NO entran aquí (su gracia es la transparencia). Sólido = colores a opacidad 100; y al ACTIVAR tabs/chips/headers se marca con un ANILLO (borde), no con un relleno que tape el texto. Base para construir más temas sólidos desde SIMA. ════════════════════════════════════════════════════════════════════════════ */ /* (B) Ventanas/barras/dock SÓLIDOS: las superficies que nacen transparentes (op 0, pensadas para el cristal) siguen la opacidad del tema (=1) → quedan opacas con el color del tema. */ html[data-theme="light"], html[data-theme="dark"], html[data-theme="solid"], html[data-theme="solid-auto"] { --fr-title-op: var(--glass-opacity); --fr-interior-op: var(--glass-opacity); --fr-subtoolbar-op: var(--glass-opacity); --fr-dock-op: var(--glass-opacity); } /* (C) Estado ACTIVO = reborde (anillo primario) con fondo transparente → el texto NO se tapa. Anillo por box-shadow inset (sin desplazar layout). Alta especificidad + !important para ganar a los rellenos activos (.chip.active sólido, .sub-tab.active tintado, etc.). */ html[data-theme="light"] .chip.active, html[data-theme="dark"] .chip.active, html[data-theme="solid"] .chip.active, html[data-theme="solid-auto"] .chip.active, html[data-theme="light"] .sub-tab.active, html[data-theme="dark"] .sub-tab.active, html[data-theme="solid"] .sub-tab.active, html[data-theme="solid-auto"] .sub-tab.active, html[data-theme="light"] .doc-tab-btn.active, html[data-theme="dark"] .doc-tab-btn.active, html[data-theme="solid"] .doc-tab-btn.active, html[data-theme="solid-auto"] .doc-tab-btn.active, html[data-theme="light"] .billing-tab-btn.active, html[data-theme="dark"] .billing-tab-btn.active, html[data-theme="solid"] .billing-tab-btn.active, html[data-theme="solid-auto"] .billing-tab-btn.active, html[data-theme="light"] .tab-btn.active, html[data-theme="dark"] .tab-btn.active, html[data-theme="solid"] .tab-btn.active, html[data-theme="solid-auto"] .tab-btn.active, html[data-theme="light"] .seg-btn.active, html[data-theme="dark"] .seg-btn.active, html[data-theme="solid"] .seg-btn.active, html[data-theme="solid-auto"] .seg-btn.active, html[data-theme="light"] .pill.active, html[data-theme="dark"] .pill.active, html[data-theme="solid"] .pill.active, html[data-theme="solid-auto"] .pill.active, html[data-theme="light"] .pill-tab.active, html[data-theme="dark"] .pill-tab.active, html[data-theme="solid"] .pill-tab.active, html[data-theme="solid-auto"] .pill-tab.active { background: transparent !important; color: var(--text-main) !important; box-shadow: inset 0 0 0 2px var(--primary) !important; } /* ── 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)); } /* ── Cristal uniforme: cards DENTRO de una ventana (Utilidades/Config) ────── El cuerpo de la ventana usa el cristal base (--glass-bg); sus cards se levantan un escalón con --surface-2 (theme-aware) para que se lean "encima". Sin !important: una card con color inline propio (p.ej. plan destacado) sigue ganando. */ .util-window-body .glass-panel, .util-window-body .card { background: var(--surface-2); } /* ── 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); } } /* Aurora rápida — misma estética, movimiento más ágil (6s vs 14s) */ .cima-anim-aurora-fast { background: #060612; } .cima-anim-aurora-fast::before, .cima-anim-aurora-fast::after { content: ''; position: absolute; inset: -40%; filter: blur(50px); animation: _caur 6s ease-in-out infinite alternate; } .cima-anim-aurora-fast::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-fast::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: -3s; animation-direction: alternate-reverse; } /* 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: #000; } .cima-anim-cosmos::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle 1.5px at 12% 28%, rgba(255,255,255,0.95), 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.65), transparent), radial-gradient(circle 1px at 88% 38%, rgba(255,255,255,0.9), transparent), radial-gradient(circle 1px at 22% 78%, rgba(255,255,255,0.55), transparent), radial-gradient(circle 1.5px at 58% 88%, rgba(255,255,255,0.75), transparent), radial-gradient(circle 1px at 35% 52%, rgba(255,255,255,0.85), 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.75), transparent), radial-gradient(circle 1px at 5% 48%, rgba(200,220,255,0.65), transparent), radial-gradient(circle 1px at 28% 8%, rgba(255,255,255,0.8), transparent), radial-gradient(circle 0.5px at 42% 34%, rgba(255,255,255,0.6), transparent), radial-gradient(circle 1.5px at 91% 66%, rgba(255,255,255,0.7), transparent), radial-gradient(circle 0.5px at 18% 58%, rgba(255,255,255,0.55), transparent), radial-gradient(circle 1px at 53% 68%, rgba(200,220,255,0.7), transparent), radial-gradient(circle 0.5px at 68% 42%, rgba(255,255,255,0.6), transparent), radial-gradient(circle 1px at 78% 18%, rgba(255,255,255,0.75), transparent), radial-gradient(circle 0.5px at 8% 82%, rgba(255,255,255,0.5), transparent), radial-gradient(circle 1.5px at 38% 92%, rgba(255,255,255,0.65), transparent), radial-gradient(circle 0.5px at 96% 8%, rgba(255,255,255,0.7), transparent), radial-gradient(circle 1px at 2% 18%, rgba(255,240,210,0.6), transparent), radial-gradient(circle 0.5px at 60% 6%, rgba(255,255,255,0.55), transparent), radial-gradient(circle 1px at 84% 50%, rgba(255,255,255,0.7), transparent), radial-gradient(circle 0.5px at 30% 44%, rgba(255,255,255,0.5), transparent), radial-gradient(circle 1px at 15% 12%, rgba(255,255,255,0.7), transparent), radial-gradient(circle 0.5px at 25% 34%, rgba(255,255,255,0.5), transparent), radial-gradient(circle 1px at 40% 18%, rgba(255,255,255,0.65), transparent), radial-gradient(circle 0.5px at 52% 24%, rgba(255,255,255,0.55), transparent), radial-gradient(circle 1.5px at 66% 76%, rgba(255,255,255,0.7), transparent), radial-gradient(circle 0.5px at 74% 8%, rgba(255,255,255,0.5), transparent), radial-gradient(circle 1px at 10% 66%, rgba(200,220,255,0.6), transparent), radial-gradient(circle 0.5px at 46% 82%, rgba(255,255,255,0.5), transparent), radial-gradient(circle 1px at 88% 88%, rgba(255,255,255,0.65), transparent), radial-gradient(circle 0.5px at 34% 62%, rgba(255,255,255,0.55), transparent), radial-gradient(circle 1px at 58% 54%, rgba(255,240,210,0.6), transparent), radial-gradient(circle 0.5px at 92% 24%, rgba(255,255,255,0.5), transparent), radial-gradient(circle 1px at 6% 34%, rgba(255,255,255,0.6), transparent), radial-gradient(circle 0.5px at 70% 88%, rgba(255,255,255,0.5), transparent), radial-gradient(circle 1.5px at 26% 90%, rgba(255,255,255,0.6), transparent), radial-gradient(circle 0.5px at 50% 14%, rgba(255,255,255,0.55), transparent), radial-gradient(circle 1px at 82% 32%, rgba(200,220,255,0.6), transparent), radial-gradient(ellipse 40% 30% at 55% 40%, rgba(80,50,160,0.14), 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); } } /* ── Fondos animados nuevos (2026-07-05): rayos + coloridos/claros ─────────── */ /* Rayos (lightning): destellos eléctricos sobre fondo oscuro. */ .cima-anim-lightning { background: #05060f; } .cima-anim-lightning::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 50% 25%, rgba(150,180,255,0.55), transparent 62%); opacity: 0; animation: _clflash 6s infinite; } .cima-anim-lightning::after { content: ''; position: absolute; inset: -20%; background: linear-gradient(100deg, transparent 47%, rgba(190,205,255,0.85) 49%, rgba(230,238,255,1) 50%, rgba(190,205,255,0.85) 51%, transparent 53%), linear-gradient(72deg, transparent 66%, rgba(150,180,255,0.6) 68%, transparent 71%); filter: blur(1px); opacity: 0; animation: _clbolt 6s infinite; } @keyframes _clflash { 0%,100%{opacity:0} 3%{opacity:1} 5%{opacity:.15} 7%{opacity:.85} 9%{opacity:0} 55%{opacity:0} 57%{opacity:1} 60%{opacity:0} } @keyframes _clbolt { 0%,100%{opacity:0} 3.5%{opacity:1} 6%{opacity:0} 56%{opacity:.8} 58%{opacity:0} } /* Plasma: manchas de color fluyendo (vibrante). */ .cima-anim-plasma { background: #1a0a3e; } .cima-anim-plasma::before { content: ''; position: absolute; inset: -40%; background: radial-gradient(ellipse 50% 40% at 30% 40%, rgba(220,40,160,0.55), transparent 60%), radial-gradient(ellipse 45% 50% at 70% 55%, rgba(60,120,255,0.5), transparent 60%), radial-gradient(ellipse 55% 45% at 50% 82%, rgba(40,220,200,0.45), transparent 60%); filter: blur(42px); animation: _cplasma 13s ease-in-out infinite alternate; } @keyframes _cplasma { 0% { transform: translate(0,0) scale(1) rotate(0deg); } 50% { transform: translate(6%,-4%) scale(1.15) rotate(8deg); } 100% { transform: translate(-5%,5%) scale(1.05) rotate(-6deg); } } /* Aurora suave: pastel sobre fondo claro. */ .cima-anim-soft-aurora { background: linear-gradient(180deg,#eef3fc,#e6ecfa); } .cima-anim-soft-aurora::before { content: ''; position: absolute; inset: -40%; filter: blur(46px); background: radial-gradient(ellipse 70% 45% at 30% 45%, rgba(120,200,180,0.42), transparent 65%), radial-gradient(ellipse 60% 40% at 70% 40%, rgba(150,170,255,0.42), transparent 65%), radial-gradient(ellipse 55% 55% at 50% 72%, rgba(200,150,230,0.38), transparent 65%); animation: _caur 16s ease-in-out infinite alternate; } /* Iridiscencia: degradado pastel que fluye (claro). */ .cima-anim-iridescence { background: linear-gradient(120deg,#ffd9ec,#d9e6ff,#d9fff0,#fff3d9,#ecd9ff); background-size: 320% 320%; animation: _cmesh 20s ease infinite; } /* Seda: bandas suaves de luz en movimiento (claro). */ .cima-anim-silk { background: #e7ecf6; } .cima-anim-silk::before { content: ''; position: absolute; inset: -30%; filter: blur(22px); background: repeating-linear-gradient(60deg, rgba(180,195,230,0.5) 0 42px, rgba(224,214,238,0.5) 42px 84px); animation: _csilk 15s ease-in-out infinite; } @keyframes _csilk { 0% { transform: translateX(0) skewY(0deg); } 50% { transform: translateX(-6%) skewY(2deg); } 100% { transform: translateX(0) skewY(0deg); } } @keyframes _crays { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Beams: haces verticales de luz desplazándose. */ .cima-anim-beams { background: #0a0f22; } .cima-anim-beams::before { content: ''; position: absolute; inset: -20% -10%; filter: blur(2px); background: repeating-linear-gradient(95deg, transparent 0 60px, rgba(120,160,255,0.12) 60px 66px, transparent 66px 130px); animation: _cbeams 8s linear infinite; } @keyframes _cbeams { 0% { transform: translateX(0) skewX(-8deg); } 100% { transform: translateX(-130px) skewX(-8deg); } } /* Side rays: rayos desde la esquina superior. */ .cima-anim-side-rays { background: radial-gradient(circle at 14% 2%, #2a3f7a, #0b1024 62%); } .cima-anim-side-rays::before { content: ''; position: absolute; inset: -60%; background: repeating-conic-gradient(from -30deg at 12% 8%, rgba(180,205,255,0.14) 0deg 3deg, transparent 3deg 11deg); animation: _crays 64s linear infinite; } /* Prism: bandas de color refractadas (vibrante). */ .cima-anim-prism { background: #0a0a16; } .cima-anim-prism::before { content: ''; position: absolute; inset: -40%; filter: blur(40px); mix-blend-mode: screen; background: linear-gradient(60deg, rgba(255,95,143,0.5), rgba(143,123,255,0.5), rgba(95,208,255,0.5), rgba(123,255,176,0.5), rgba(255,209,95,0.5)); background-size: 300% 300%; animation: _cmesh 14s ease infinite; } /* Prismatic burst: abanico cónico arcoíris girando. */ .cima-anim-prismatic-burst { background: #05030a; } .cima-anim-prismatic-burst::before { content: ''; position: absolute; inset: -30%; filter: blur(50px); opacity: 0.6; background: conic-gradient(from 0deg at 50% 50%, #ff5f8f, #ffd15f, #5fffa0, #5fd0ff, #a05fff, #ff5f8f); animation: _crays 30s linear infinite; } /* Galaxy: espiral estelar. */ .cima-anim-galaxy { background: radial-gradient(circle at 50% 50%, #3a1a5e, #08040f 70%); } .cima-anim-galaxy::before { content: ''; position: absolute; inset: -40%; filter: blur(22px); background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(180,140,255,0.18) 40deg, transparent 90deg, rgba(120,180,255,0.15) 150deg, transparent 200deg, rgba(200,150,255,0.15) 280deg, transparent 340deg); animation: _crays 55s linear infinite; } .cima-anim-galaxy::after { content: ''; position: absolute; inset: 0; opacity: 0.85; background-image: radial-gradient(circle 1px at 30% 40%,#fff,transparent),radial-gradient(circle 1px at 60% 55%,#fff,transparent),radial-gradient(circle 1.5px at 45% 65%,#fff,transparent),radial-gradient(circle 1px at 70% 30%,#fff,transparent),radial-gradient(circle 1px at 20% 70%,#fff,transparent),radial-gradient(circle 1px at 80% 60%,#fff,transparent),radial-gradient(circle 2px at 50% 48%,#ffe0b0,transparent); animation: _ccos 5s ease-in-out infinite alternate; } /* Dark veil: velo oscuro con deriva de color tenue. */ .cima-anim-dark-veil { background: #08070f; } .cima-anim-dark-veil::before { content: ''; position: absolute; inset: -40%; filter: blur(60px); background: radial-gradient(ellipse 50% 40% at 30% 40%, rgba(90,50,160,0.35), transparent 60%), radial-gradient(ellipse 45% 50% at 75% 60%, rgba(40,60,140,0.30), transparent 60%); animation: _cplasma 18s ease-in-out infinite alternate; } /* Dot grid: retícula de puntos animada. */ .cima-anim-dot-grid { background: #0b0f1c; } .cima-anim-dot-grid::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle 1.5px, rgba(120,160,255,0.42) 1px, transparent 1.6px); background-size: 28px 28px; animation: _cdot 6s ease-in-out infinite alternate; } @keyframes _cdot { 0% { opacity: 0.5; background-position: 0 0; } 100% { opacity: 1; background-position: 6px 6px; } } /* Threads: hilos de luz fluyendo. */ .cima-anim-threads { background: #0a0e1a; } .cima-anim-threads::before { content: ''; position: absolute; inset: -30%; background: repeating-linear-gradient(15deg, transparent 0 18px, rgba(120,170,255,0.12) 18px 19px, transparent 19px 38px); animation: _csilk 12s ease-in-out infinite; }