/* ╔══════════════════════════════════════════════════════════╗ ║ JAVA POO LEARNING — DARK MODE ║ ║ Activado con clase "dark" en ║ ╚══════════════════════════════════════════════════════════╝ */ /* ── Paleta de colores dark ── */ html.dark { --dm-bg: #0d1117; --dm-surface: #161b22; --dm-card: #21262d; --dm-card-2: #2d333b; --dm-border: #30363d; --dm-border-2: #444c56; --dm-text: #e6edf3; --dm-text-2: #adbac7; --dm-text-muted:#768390; } /* ── Transición suave al cambiar tema ── */ body, header, .bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-800, [class*="rm-node"], [class*="rm-modal"], input, textarea, select { transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } /* ══════════════════════════════════════ BASE ═══════════════════════════════════════ */ html.dark body { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; } html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 { color: var(--dm-text) !important; } html.dark p { color: var(--dm-text-2) !important; } /* ══════════════════════════════════════ FONDO PRINCIPAL Y CONTENEDORES ═══════════════════════════════════════ */ html.dark .bg-slate-50 { background-color: var(--dm-bg) !important; } html.dark .bg-slate-100 { background-color: var(--dm-surface) !important; } html.dark .bg-slate-200 { background-color: var(--dm-card) !important; } html.dark .bg-white { background-color: var(--dm-card) !important; } html.dark .bg-gray-50 { background-color: var(--dm-bg) !important; } html.dark .bg-gray-100 { background-color: var(--dm-surface) !important; } /* ══════════════════════════════════════ TEXTO ═══════════════════════════════════════ */ html.dark .text-slate-900 { color: var(--dm-text) !important; } html.dark .text-slate-800 { color: var(--dm-text) !important; } html.dark .text-slate-700 { color: var(--dm-text) !important; } html.dark .text-slate-600 { color: var(--dm-text-2) !important; } html.dark .text-slate-500 { color: var(--dm-text-muted)!important; } html.dark .text-slate-400 { color: var(--dm-text-muted)!important; } html.dark .text-gray-900 { color: var(--dm-text) !important; } html.dark .text-gray-800 { color: var(--dm-text) !important; } html.dark .text-gray-700 { color: var(--dm-text) !important; } html.dark .text-gray-600 { color: var(--dm-text-2) !important; } /* ══════════════════════════════════════ BORDES ═══════════════════════════════════════ */ html.dark .border-slate-100 { border-color: var(--dm-border) !important; } html.dark .border-slate-200 { border-color: var(--dm-border) !important; } html.dark .border-slate-300 { border-color: var(--dm-border-2)!important; } html.dark .border-gray-200 { border-color: var(--dm-border) !important; } html.dark .border-gray-300 { border-color: var(--dm-border-2)!important; } html.dark .divide-slate-200 > * + * { border-color: var(--dm-border) !important; } /* ══════════════════════════════════════ TARJETAS DE SECCIÓN — COLORES LIGHT (from-*-50, bg-*-50, bg-*-100) ═══════════════════════════════════════ */ /* Azules */ html.dark .bg-blue-50 { background-color: rgba(30,58,138,.15) !important; } html.dark .bg-blue-100 { background-color: rgba(30,58,138,.25) !important; } html.dark .border-blue-200{ border-color: rgba(59,130,246,.35) !important; } html.dark .border-blue-300{ border-color: rgba(59,130,246,.5) !important; } html.dark .text-blue-800 { color: #93c5fd !important; } html.dark .text-blue-700 { color: #60a5fa !important; } html.dark .text-blue-900 { color: #bfdbfe !important; } /* Índigo */ html.dark .bg-indigo-50 { background-color: rgba(49,46,129,.15) !important; } html.dark .bg-indigo-100 { background-color: rgba(49,46,129,.25) !important; } html.dark .border-indigo-200{ border-color: rgba(99,102,241,.35) !important; } html.dark .border-indigo-300{ border-color: rgba(99,102,241,.5) !important; } html.dark .text-indigo-800 { color: #a5b4fc !important; } html.dark .text-indigo-700 { color: #818cf8 !important; } html.dark .text-indigo-900 { color: #c7d2fe !important; } /* Cian */ html.dark .bg-cyan-50 { background-color: rgba(22,78,99,.15) !important; } html.dark .bg-cyan-100 { background-color: rgba(22,78,99,.25) !important; } html.dark .border-cyan-200{ border-color: rgba(6,182,212,.35) !important; } html.dark .border-cyan-300{ border-color: rgba(6,182,212,.5) !important; } html.dark .text-cyan-800 { color: #67e8f9 !important; } html.dark .text-cyan-700 { color: #22d3ee !important; } /* Teal */ html.dark .bg-teal-50 { background-color: rgba(19,78,74,.15) !important; } html.dark .bg-teal-100 { background-color: rgba(19,78,74,.25) !important; } html.dark .border-teal-200{ border-color: rgba(45,212,191,.35) !important; } html.dark .border-teal-300{ border-color: rgba(45,212,191,.5) !important; } html.dark .text-teal-800 { color: #5eead4 !important; } html.dark .text-teal-700 { color: #2dd4bf !important; } /* Verde / Esmeralda */ html.dark .bg-green-50 { background-color: rgba(5,46,22,.15) !important; } html.dark .bg-green-100 { background-color: rgba(5,46,22,.25) !important; } html.dark .bg-emerald-50 { background-color: rgba(6,78,59,.15) !important; } html.dark .bg-emerald-100 { background-color: rgba(6,78,59,.25) !important; } html.dark .border-green-200 { border-color: rgba(34,197,94,.35) !important; } html.dark .border-green-300 { border-color: rgba(34,197,94,.5) !important; } html.dark .border-emerald-200{border-color: rgba(52,211,153,.35) !important; } html.dark .text-green-800 { color: #86efac !important; } html.dark .text-green-700 { color: #4ade80 !important; } html.dark .text-emerald-800 { color: #6ee7b7 !important; } /* Ámbar / Naranja / Amarillo */ html.dark .bg-amber-50 { background-color: rgba(120,53,15,.15) !important; } html.dark .bg-amber-100 { background-color: rgba(120,53,15,.25) !important; } html.dark .bg-orange-50 { background-color: rgba(124,45,18,.15) !important; } html.dark .bg-yellow-50 { background-color: rgba(113,63,18,.15) !important; } html.dark .bg-yellow-100 { background-color: rgba(113,63,18,.25) !important; } html.dark .border-amber-200 { border-color: rgba(245,158,11,.35) !important; } html.dark .border-amber-300 { border-color: rgba(245,158,11,.5) !important; } html.dark .border-yellow-300{ border-color: rgba(234,179,8,.5) !important; } html.dark .text-amber-800 { color: #fcd34d !important; } html.dark .text-amber-700 { color: #fbbf24 !important; } html.dark .text-yellow-700 { color: #fde047 !important; } html.dark .text-orange-800 { color: #fdba74 !important; } /* Rosa / Rojo */ html.dark .bg-rose-50 { background-color: rgba(136,19,55,.15) !important; } html.dark .bg-rose-100 { background-color: rgba(136,19,55,.25) !important; } html.dark .bg-pink-50 { background-color: rgba(131,24,67,.15) !important; } html.dark .bg-red-50 { background-color: rgba(127,29,29,.15) !important; } html.dark .bg-red-100 { background-color: rgba(127,29,29,.25) !important; } html.dark .border-rose-200 { border-color: rgba(251,113,133,.35) !important; } html.dark .border-rose-300 { border-color: rgba(251,113,133,.5) !important; } html.dark .border-pink-200 { border-color: rgba(249,168,212,.35) !important; } html.dark .border-red-200 { border-color: rgba(252,165,165,.35) !important; } html.dark .text-rose-800 { color: #fda4af !important; } html.dark .text-rose-700 { color: #fb7185 !important; } html.dark .text-pink-800 { color: #f9a8d4 !important; } html.dark .text-red-600 { color: #f87171 !important; } /* Violeta / Púrpura */ html.dark .bg-violet-50 { background-color: rgba(91,33,182,.15) !important; } html.dark .bg-violet-100 { background-color: rgba(91,33,182,.25) !important; } html.dark .bg-purple-50 { background-color: rgba(88,28,135,.15) !important; } html.dark .bg-purple-100 { background-color: rgba(88,28,135,.25) !important; } html.dark .border-violet-200 { border-color: rgba(167,139,250,.35) !important; } html.dark .border-violet-300 { border-color: rgba(167,139,250,.5) !important; } html.dark .border-purple-200 { border-color: rgba(192,132,252,.35) !important; } html.dark .text-violet-800 { color: #c4b5fd !important; } html.dark .text-violet-700 { color: #a78bfa !important; } html.dark .text-purple-800 { color: #d8b4fe !important; } html.dark .text-purple-700 { color: #c084fc !important; } /* ══════════════════════════════════════ GRADIENTES DE TARJETAS (from-*-50) ═══════════════════════════════════════ */ html.dark [class*="from-blue-50"] { --tw-gradient-from: rgba(30,58,138,.18) !important; } html.dark [class*="from-indigo-50"] { --tw-gradient-from: rgba(49,46,129,.18) !important; } html.dark [class*="from-cyan-50"] { --tw-gradient-from: rgba(22,78,99,.18) !important; } html.dark [class*="from-teal-50"] { --tw-gradient-from: rgba(19,78,74,.18) !important; } html.dark [class*="from-green-50"] { --tw-gradient-from: rgba(5,46,22,.18) !important; } html.dark [class*="from-emerald-50"]{ --tw-gradient-from: rgba(6,78,59,.18) !important; } html.dark [class*="from-amber-50"] { --tw-gradient-from: rgba(120,53,15,.18) !important; } html.dark [class*="from-orange-50"] { --tw-gradient-from: rgba(124,45,18,.18) !important; } html.dark [class*="from-rose-50"] { --tw-gradient-from: rgba(136,19,55,.18) !important; } html.dark [class*="from-pink-50"] { --tw-gradient-from: rgba(131,24,67,.18) !important; } html.dark [class*="from-violet-50"] { --tw-gradient-from: rgba(91,33,182,.18) !important; } html.dark [class*="from-purple-50"] { --tw-gradient-from: rgba(88,28,135,.18) !important; } html.dark [class*="from-yellow-50"] { --tw-gradient-from: rgba(113,63,18,.18) !important; } html.dark [class*="from-red-50"] { --tw-gradient-from: rgba(127,29,29,.18) !important; } html.dark [class*="from-slate-50"] { --tw-gradient-from: var(--dm-surface) !important; } html.dark [class*="from-slate-700"] { --tw-gradient-from: #0d1117 !important; } html.dark [class*="from-slate-800"] { --tw-gradient-from: #090d12 !important; } html.dark [class*="to-cyan-50"] { --tw-gradient-to: rgba(22,78,99,.12) !important; } html.dark [class*="to-blue-50"] { --tw-gradient-to: rgba(30,58,138,.12) !important; } html.dark [class*="to-indigo-50"] { --tw-gradient-to: rgba(49,46,129,.12) !important; } html.dark [class*="to-purple-50"] { --tw-gradient-to: rgba(88,28,135,.12) !important; } html.dark [class*="to-teal-50"] { --tw-gradient-to: rgba(19,78,74,.12) !important; } html.dark [class*="to-green-50"] { --tw-gradient-to: rgba(5,46,22,.12) !important; } html.dark [class*="to-emerald-50"] { --tw-gradient-to: rgba(6,78,59,.12) !important; } html.dark [class*="to-orange-50"] { --tw-gradient-to: rgba(124,45,18,.12) !important; } html.dark [class*="to-amber-50"] { --tw-gradient-to: rgba(120,53,15,.12) !important; } html.dark [class*="to-pink-50"] { --tw-gradient-to: rgba(131,24,67,.12) !important; } html.dark [class*="to-zinc-50"] { --tw-gradient-to: var(--dm-card) !important; } html.dark [class*="to-slate-50"] { --tw-gradient-to: var(--dm-surface) !important; } html.dark [class*="to-violet-50"] { --tw-gradient-to: rgba(91,33,182,.12) !important; } html.dark [class*="to-slate-800"] { --tw-gradient-to: #090d12 !important; } /* Tarjetas con fondo oscuro (slate-700/800) — mantener oscuro pero adaptar */ html.dark .bg-slate-700, html.dark .bg-slate-800 { background-color: #0d1117 !important; } /* ══════════════════════════════════════ CÓDIGO INLINE ═══════════════════════════════════════ */ html.dark code:not([class]) { background-color: rgba(255,255,255,.08) !important; color: #a5d6ff !important; border-radius: 4px; padding: 0.1em 0.35em; } /* ══════════════════════════════════════ TABLAS ═══════════════════════════════════════ */ html.dark table { color: var(--dm-text); } html.dark thead tr, html.dark .bg-slate-100 th { background-color: var(--dm-surface) !important; } html.dark tbody tr:hover, html.dark .hover\:bg-slate-50:hover{ background-color: rgba(255,255,255,.04) !important; } html.dark .bg-slate-50 td, html.dark .bg-slate-50 th { background-color: var(--dm-surface) !important; } /* ══════════════════════════════════════ INPUTS / FORMS ═══════════════════════════════════════ */ html.dark input, html.dark textarea, html.dark select { background-color: var(--dm-card) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: var(--dm-text-muted) !important; } /* ══════════════════════════════════════ MODALES ═══════════════════════════════════════ */ html.dark .rm-modal-box, html.dark [class*="rm-modal"] .bg-white, html.dark .fixed .bg-white { background-color: var(--dm-surface) !important; } /* ══════════════════════════════════════ ROADMAP ═══════════════════════════════════════ */ html.dark .rm-node { background-color: var(--dm-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark .rm-node--available { border-color: rgba(99,102,241,.5) !important; } html.dark .rm-node--done { border-color: rgba(34,197,94,.5) !important; } html.dark .rm-node--locked { opacity: .6; } /* ══════════════════════════════════════ NAVEGACIÓN / TABS ═══════════════════════════════════════ */ html.dark .bg-white\/10 { background-color: rgba(255,255,255,.06) !important; } /* ── Sticky tabs bar (bg-slate-50/95 usa modificador de opacidad de Tailwind, no es captado por .bg-slate-50) ── */ html.dark .bg-slate-50\/95 { background-color: rgba(22, 27, 34, 0.95) !important; } html.dark #learn-section-view .sticky { background-color: rgba(22, 27, 34, 0.95) !important; border-color: var(--dm-border) !important; } /* ══════════════════════════════════════ SCROLLBAR ═══════════════════════════════════════ */ html.dark ::-webkit-scrollbar { width: 8px; height: 8px; } html.dark ::-webkit-scrollbar-track { background: var(--dm-surface); } html.dark ::-webkit-scrollbar-thumb { background: var(--dm-border-2); border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #636e7b; } /* ══════════════════════════════════════ BOTÓN TOGGLE — estilos del botón en header ═══════════════════════════════════════ */ #btn-dark-toggle { font-size: 1rem; line-height: 1; }