/* ============================================================ === VARIABLES Y RESET === ============================================================ */ :root { --bg-dark: #0a0e1a; --bg-card: #111827; --bg-card2: #1a2236; --accent1: #00d4ff; --accent2: #7c3aed; --accent3: #f59e0b; --accent4: #10b981; --accent5: #ef4444; --text-main: #e2e8f0; --text-muted: #a1afc4; --text-dim: #6b7280; --border: #1e2d45; --shadow: 0 4px 32px rgba(0, 212, 255, 0.08); --radius: 14px; --font-body: "Segoe UI", system-ui, sans-serif; --font-mono: "Cascadia Code", "Consolas", "Courier New", monospace; --nav-h: 64px; /* Z-index escalonado (sistema unificado) */ --z-base: 1; --z-overlay: 100; --z-dropdown: 200; --z-modal: 400; --z-flowchart: 900; --z-fullscreen: 950; --z-input-modal: 980; --z-toast: 1000; } /* ============================================================ TEMAS — 5 paletas seleccionables (data-theme en ) Por defecto: "dark" (paleta original). Las clases .kw-* específicas también se sobreescriben para mantener legibilidad de la sintaxis en cada tema. ============================================================ */ /* TEMA: Light (claro estilo VS Code Light+) */ html[data-theme="light"] { --bg-dark: #f6f8fb; --bg-card: #ffffff; --bg-card2: #eef2f7; --accent1: #0078d4; --accent2: #6f42c1; --accent3: #d97706; --accent4: #059669; --accent5: #dc2626; --text-main: #1f2937; --text-muted: #4b5563; --text-dim: #6b7280; --border: #d1d5db; --shadow: 0 4px 32px rgba(0, 120, 212, 0.10); } html[data-theme="light"] .kw-comment { color: #6a737d !important; } html[data-theme="light"] .kw-string { color: #b45309 !important; } html[data-theme="light"] .kw-number { color: #6f42c1 !important; } html[data-theme="light"] .kw-op { color: #c026d3 !important; } html[data-theme="light"] .kw-bool { color: #b45309 !important; } html[data-theme="light"] .kw-func { color: #1d4ed8 !important; } html[data-theme="light"] .kw-math { color: #1d4ed8 !important; } html[data-theme="light"] .kw-logic { color: #be185d !important; } html[data-theme="light"] .kw-sinsaltar { color: #047857 !important; } html[data-theme="light"] .kw-uservar.kw-uservar-notype { color: #1f2937 !important; } html[data-theme="light"] .console-output, html[data-theme="light"] .big-console { color: #14532d; background: #fafafa !important; } /* TEMA: Solarized (paleta cálida, cremosa) */ html[data-theme="solarized"] { --bg-dark: #002b36; --bg-card: #073642; --bg-card2: #0e4250; --accent1: #2aa198; --accent2: #6c71c4; --accent3: #cb4b16; --accent4: #859900; --accent5: #dc322f; --text-main: #fdf6e3; --text-muted: #93a1a1; --text-dim: #657b83; --border: #103e4b; --shadow: 0 4px 32px rgba(42, 161, 152, 0.10); } html[data-theme="solarized"] .kw-comment { color: #586e75 !important; } html[data-theme="solarized"] .kw-string { color: #b58900 !important; } html[data-theme="solarized"] .kw-number { color: #d33682 !important; } html[data-theme="solarized"] .kw-op { color: #d33682 !important; } html[data-theme="solarized"] .kw-bool { color: #cb4b16 !important; } html[data-theme="solarized"] .kw-func { color: #268bd2 !important; } html[data-theme="solarized"] .kw-math { color: #268bd2 !important; } html[data-theme="solarized"] .kw-logic { color: #d33682 !important; } html[data-theme="solarized"] .kw-sinsaltar { color: #859900 !important; } /* TEMA: Monokai (clásico dark + vibrante) */ html[data-theme="monokai"] { --bg-dark: #1e1f1c; --bg-card: #272822; --bg-card2: #2d2e28; --accent1: #66d9ef; --accent2: #ae81ff; --accent3: #fd971f; --accent4: #a6e22e; --accent5: #f92672; --text-main: #f8f8f2; --text-muted: #cfcfc2; --text-dim: #75715e; --border: #3e3d32; --shadow: 0 4px 32px rgba(166, 226, 46, 0.06); } html[data-theme="monokai"] .kw-comment { color: #75715e !important; font-style: italic; } html[data-theme="monokai"] .kw-string { color: #e6db74 !important; } html[data-theme="monokai"] .kw-number { color: #ae81ff !important; } html[data-theme="monokai"] .kw-op { color: #f92672 !important; } html[data-theme="monokai"] .kw-bool { color: #ae81ff !important; } html[data-theme="monokai"] .kw-func { color: #a6e22e !important; } html[data-theme="monokai"] .kw-math { color: #66d9ef !important; } html[data-theme="monokai"] .kw-logic { color: #f92672 !important; } html[data-theme="monokai"] .kw-sinsaltar { color: #a6e22e !important; } /* TEMA: Ocean (azul profundo, cyan, suave) */ html[data-theme="ocean"] { --bg-dark: #0b1a2b; --bg-card: #112236; --bg-card2: #1a304a; --accent1: #38bdf8; --accent2: #818cf8; --accent3: #fbbf24; --accent4: #34d399; --accent5: #f87171; --text-main: #e0f2fe; --text-muted: #93c5fd; --text-dim: #64748b; --border: #1e3a5c; --shadow: 0 4px 32px rgba(56, 189, 248, 0.10); } html[data-theme="ocean"] .kw-comment { color: #475569 !important; font-style: italic; } html[data-theme="ocean"] .kw-string { color: #fde68a !important; } html[data-theme="ocean"] .kw-number { color: #c4b5fd !important; } html[data-theme="ocean"] .kw-op { color: #f0abfc !important; } html[data-theme="ocean"] .kw-bool { color: #fde68a !important; } html[data-theme="ocean"] .kw-func { color: #38bdf8 !important; } html[data-theme="ocean"] .kw-math { color: #38bdf8 !important; } html[data-theme="ocean"] .kw-logic { color: #f9a8d4 !important; } html[data-theme="ocean"] .kw-sinsaltar { color: #6ee7b7 !important; } /* ============================================================ TEMAS DE PÁGINA — 5 paletas adicionales (data-page-theme) Estos override SOLO los colores de shell (nav/body/cards/text) sin tocar las clases .kw-* del editor. Permite combinar un tema de página (estética general) con un tema de editor (paleta de sintaxis) de forma independiente. ============================================================ */ /* PÁGINA: Default (dark navy — coincide con data-theme="dark") */ html[data-page-theme="default"] { --bg-dark: #0a0e1a; --bg-card: #111827; --bg-card2: #1a2236; --text-main: #e2e8f0; --text-muted: #a1afc4; --text-dim: #6b7280; --border: #1e2d45; } /* PÁGINA: Midnight (índigo profundo) */ html[data-page-theme="midnight"] { --bg-dark: #0a0a1f; --bg-card: #14142b; --bg-card2: #1d1d3d; --text-main: #e9e6ff; --text-muted: #a8a5cc; --text-dim: #6b6b8f; --border: #2a2a55; } /* PÁGINA: Slate (gris azulado medio) */ html[data-page-theme="slate"] { --bg-dark: #1e293b; --bg-card: #334155; --bg-card2: #475569; --text-main: #f1f5f9; --text-muted: #cbd5e1; --text-dim: #94a3b8; --border: #64748b; } /* PÁGINA: Paper (claro estilo papel/crema) */ html[data-page-theme="paper"] { --bg-dark: #faf7f2; --bg-card: #ffffff; --bg-card2: #f0ece4; --text-main: #2d2a26; --text-muted: #5a5650; --text-dim: #8a8580; --border: #d6d0c4; --shadow: 0 4px 32px rgba(0, 0, 0, 0.06); } /* PÁGINA: Sunrise (calidez rosada/melocotón claro) */ html[data-page-theme="sunrise"] { --bg-dark: #fff7f0; --bg-card: #ffffff; --bg-card2: #ffe8d6; --text-main: #3d2a1f; --text-muted: #7a5c4e; --text-dim: #a8907f; --border: #f5d4b8; --shadow: 0 4px 32px rgba(244, 114, 87, 0.10); } /* ── FIX: