/* =================================================================== ELESIS UI · MODO NOCHE (dark) · se activa con html.elesis-night ------------------------------------------------------------------- Capa de tema oscuro que se monta SOBRE elesis-ui.css y elesis-aurora.css. Debe cargarse DESPUÉS de ambos. Sin la clase .elesis-night en no afecta absolutamente nada. Conserva los acentos violeta de Aurora. Solo CSS — no toca lógica, datos ni formularios. =================================================================== */ /* -------- Fondo y texto base -------- */ html.elesis-night body { background: radial-gradient(1100px 520px at 85% -12%, rgba(124,58,237,.18), transparent 60%), radial-gradient(900px 520px at -5% 0%, rgba(34,211,238,.10), transparent 55%), #070b14 !important; color: #cbd5e1; } /* -------- SIDEBAR (vuelve a oscuro elegante) -------- */ html.elesis-night aside#sidebar { background: rgba(13,20,35,.88) !important; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-right: 1px solid rgba(148,163,184,.10) !important; } html.elesis-night aside .border-slate-800 { border-color: rgba(148,163,184,.10) !important; } html.elesis-night aside .text-white { color: #f1f5f9 !important; } html.elesis-night aside nav a { color: #cbd5e1 !important; } html.elesis-night aside .text-slate-300 { color: #cbd5e1 !important; } html.elesis-night aside .text-slate-400 { color: #94a3b8 !important; } html.elesis-night aside .text-slate-500 { color: #64748b !important; } html.elesis-night aside .text-blue-500 { color: #a78bfa !important; } html.elesis-night aside nav a:hover { background: rgba(34,211,238,.08) !important; color: #e2e8f0 !important; } /* Chips de icono en oscuro */ html.elesis-night aside nav a i { background: rgba(99,102,241,.20) !important; color: #a5b4fc !important; } html.elesis-night aside nav a.bg-blue-600 { background: linear-gradient(135deg, rgba(99,102,241,.24), rgba(124,58,237,.20)) !important; color: #ddd6fe !important; } html.elesis-night aside nav a.bg-blue-600 i { background: linear-gradient(135deg,#6366f1,#7c3aed) !important; color: #fff !important; } html.elesis-night aside .text-purple-300 { color: #c4b5fd !important; } html.elesis-night aside #elesis-search-trigger { background: rgba(148,163,184,.08) !important; border-color: rgba(148,163,184,.14) !important; color: #94a3b8 !important; } html.elesis-night aside #elesis-search-trigger .bg-slate-900\/80 { background: rgba(0,0,0,.4) !important; color: #94a3b8 !important; border-color: rgba(148,163,184,.18) !important; } html.elesis-night aside .bg-slate-800\/50 { background: rgba(148,163,184,.08) !important; border-color: rgba(148,163,184,.12) !important; } html.elesis-night aside .bg-slate-700 { background: linear-gradient(135deg,#6366f1,#7c3aed) !important; color: #fff !important; } /* -------- SUPERFICIES (tarjetas, paneles, modales) -------- */ html.elesis-night main .bg-white, html.elesis-night .bg-white { background: #111a2c !important; border-color: rgba(148,163,184,.12) !important; } /* Desplegables de búsqueda en noche: sólidos y por encima de todo */ html.elesis-night #res_students, html.elesis-night #res_softwares, html.elesis-night #res_courses, html.elesis-night #live_results, html.elesis-night #live_results_course { background: #0f1729 !important; box-shadow: 0 16px 40px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(148,163,184,.12) !important; } html.elesis-night dialog { background: #0f1729 !important; } /* Header pegajoso translúcido (elesis-ui) */ html.elesis-night header.bg-white { background: rgba(15,23,42,.85) !important; border-bottom-color: rgba(148,163,184,.12) !important; } /* -------- TEXTO -------- */ html.elesis-night .text-slate-900, html.elesis-night .text-slate-800, html.elesis-night .text-slate-700 { color: #e2e8f0 !important; } html.elesis-night .text-slate-600 { color: #cbd5e1 !important; } html.elesis-night .text-slate-500 { color: #94a3b8 !important; } html.elesis-night .text-slate-400 { color: #64748b !important; } html.elesis-night .text-slate-300 { color: #475569 !important; } /* -------- BORDES / SEPARADORES -------- */ html.elesis-night .border, html.elesis-night .border-slate-100, html.elesis-night .border-slate-200, html.elesis-night .border-slate-300 { border-color: rgba(148,163,184,.14) !important; } html.elesis-night .divide-slate-100 > :not([hidden]) ~ :not([hidden]), html.elesis-night .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(148,163,184,.10) !important; } html.elesis-night hr { border-color: rgba(148,163,184,.14) !important; } /* -------- SUPERFICIES SUAVES (slate-50/100) -------- */ html.elesis-night .bg-slate-50, html.elesis-night .bg-slate-100, html.elesis-night .bg-slate-50\/50, html.elesis-night .bg-slate-50\/30 { background: rgba(148,163,184,.06) !important; } /* -------- TABLAS -------- */ html.elesis-night table thead th { background: rgba(148,163,184,.05) !important; color: #94a3b8 !important; border-bottom-color: rgba(148,163,184,.12) !important; } html.elesis-night table tbody tr:hover { background: rgba(34,211,238,.05) !important; } html.elesis-night table tbody td { border-color: rgba(148,163,184,.10) !important; } /* -------- INPUTS / SELECTS / TEXTAREAS -------- */ html.elesis-night input, html.elesis-night select, html.elesis-night textarea { background: rgba(2,6,23,.55) !important; color: #e2e8f0 !important; border-color: rgba(148,163,184,.18) !important; } html.elesis-night input::placeholder, html.elesis-night textarea::placeholder { color: #64748b !important; } html.elesis-night input:focus, html.elesis-night select:focus, html.elesis-night textarea:focus { background: rgba(2,6,23,.8) !important; border-color: #7c3aed !important; box-shadow: 0 0 0 4px rgba(124,58,237,.18) !important; } /* Autofill en oscuro */ html.elesis-night input:-webkit-autofill, html.elesis-night input:-webkit-autofill:hover, html.elesis-night input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 32px #0f1729 inset !important; -webkit-text-fill-color: #e2e8f0 !important; } /* -------- INSIGNIAS / FONDOS DE COLOR SUAVE -> tintes translúcidos -------- */ html.elesis-night .bg-blue-50, html.elesis-night .bg-blue-100 { background: rgba(59,130,246,.15) !important; } html.elesis-night .bg-emerald-50, html.elesis-night .bg-emerald-100, html.elesis-night .bg-green-50, html.elesis-night .bg-green-100 { background: rgba(16,185,129,.15) !important; } html.elesis-night .bg-amber-50, html.elesis-night .bg-amber-100, html.elesis-night .bg-yellow-50, html.elesis-night .bg-yellow-100 { background: rgba(245,158,11,.15) !important; } html.elesis-night .bg-red-50, html.elesis-night .bg-red-100, html.elesis-night .bg-rose-50, html.elesis-night .bg-rose-100 { background: rgba(244,63,94,.15) !important; } html.elesis-night .bg-purple-50, html.elesis-night .bg-purple-100, html.elesis-night .bg-violet-50 { background: rgba(124,58,237,.18) !important; } html.elesis-night .bg-cyan-50, html.elesis-night .bg-cyan-100 { background: rgba(34,211,238,.15) !important; } /* Texto de insignias -> tonos claros legibles sobre tinte oscuro */ html.elesis-night .text-blue-700, html.elesis-night .text-blue-600 { color: #93c5fd !important; } html.elesis-night .text-emerald-700, html.elesis-night .text-emerald-600, html.elesis-night .text-green-700, html.elesis-night .text-green-600 { color: #6ee7b7 !important; } html.elesis-night .text-amber-700, html.elesis-night .text-amber-600, html.elesis-night .text-yellow-800 { color: #fcd34d !important; } html.elesis-night .text-red-700, html.elesis-night .text-red-600, html.elesis-night .text-rose-700 { color: #fca5a5 !important; } html.elesis-night .text-purple-700, html.elesis-night .text-purple-600 { color: #c4b5fd !important; } html.elesis-night .text-cyan-700, html.elesis-night .text-cyan-600 { color: #67e8f9 !important; } /* Iconos clarito (text-blue-200 / blue-300, etc.) que en claro eran muy tenues */ html.elesis-night .text-blue-200, html.elesis-night .text-blue-300 { color: #60a5fa !important; } html.elesis-night .text-slate-300.fa, html.elesis-night i.text-slate-300 { color: #475569 !important; } /* -------- BOTÓN SECUNDARIO NEUTRO (slate-200) -------- */ html.elesis-night button.bg-slate-200, html.elesis-night a.bg-slate-200 { background: rgba(148,163,184,.12) !important; color: #cbd5e1 !important; } /* -------- HERO Aurora: en noche bajamos un poco el brillo del degradado -------- */ html.elesis-night .aurora-hero { box-shadow: 0 20px 40px -16px rgba(0,0,0,.6) !important; } /* -------- SCROLLBARS -------- */ html.elesis-night ::-webkit-scrollbar-thumb { background: #334155 !important; background-clip: padding-box; } html.elesis-night ::-webkit-scrollbar-thumb:hover { background: #475569 !important; background-clip: padding-box; } /* -------- SELECCIÓN DE TEXTO -------- */ html.elesis-night ::selection { background: rgba(124,58,237,.4); color: #fff; } /* -------- Interruptor de tema (estado NOCHE: thumb a la derecha) -------- */ html.elesis-night .elesis-theme-switch { background: rgba(34,211,238,.10); } html.elesis-night .elesis-theme-switch:hover { background: rgba(34,211,238,.16); } html.elesis-night .elesis-theme-switch .ets-label { color: #cbd5e1; } html.elesis-night .elesis-theme-switch .ets-track { background: #0ea5e9; box-shadow: inset 0 1px 3px rgba(0,0,0,.3); } html.elesis-night .elesis-theme-switch .ets-knob { transform: translateX(26px); } html.elesis-night .elesis-theme-switch .ets-i-sun { opacity: 0; } html.elesis-night .elesis-theme-switch .ets-i-moon { opacity: 1; } /* -------- Modal de exportación en modo noche -------- */ html.elesis-night .elesis-export-card { background: #0f1729; } html.elesis-night .elesis-export-head { color: #e2e8f0; border-bottom-color: rgba(148,163,184,.12); } html.elesis-night .elesis-export-x:hover { background: rgba(148,163,184,.12); color: #cbd5e1; } html.elesis-night .elesis-export-opt { background: rgba(148,163,184,.06); border-color: rgba(148,163,184,.14); color: #cbd5e1; } html.elesis-night .elesis-export-opt:hover { background: rgba(124,58,237,.14); border-color: #7c3aed; } html.elesis-night .elesis-export-opt small { color: #64748b; }