/* =================================================================== ELESIS UI · TEMA "AURORA" (premium / glass / violeta) ------------------------------------------------------------------- Capa de TEMA con ALCANCE por clase: solo actúa cuando el tiene la clase .elesis-aurora. Las páginas que NO la tengan quedan EXACTAMENTE igual que hoy. Se carga DESPUÉS de elesis-ui.css. Solo CSS — no toca lógica, datos, formularios ni endpoints. =================================================================== */ /* -------- Fondo general aurora -------- */ .elesis-aurora { background: radial-gradient(1200px 520px at 85% -12%, rgba(124,58,237,.10), transparent 60%), radial-gradient(900px 520px at -5% 0%, rgba(56,189,248,.10), transparent 55%), #f6f7fb !important; } /* ============================================================ SIDEBAR · de oscuro → claro tipo Aurora (con chips de icono) ============================================================ */ .elesis-aurora aside#sidebar { background: rgba(255,255,255,.78) !important; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-right: 1px solid rgba(15,23,42,.06) !important; } .elesis-aurora aside .border-slate-800 { border-color: rgba(15,23,42,.07) !important; } /* Texto del sidebar → tonos oscuros legibles sobre claro */ .elesis-aurora aside .text-white { color: #0f172a !important; } .elesis-aurora aside .text-slate-300 { color: #475569 !important; } .elesis-aurora aside .text-slate-400 { color: #94a3b8 !important; } .elesis-aurora aside .text-slate-500 { color: #94a3b8 !important; } .elesis-aurora aside .text-blue-500 { color: #7c3aed !important; } /* "ADMIN" */ /* Logo */ .elesis-aurora aside .bg-blue-600.w-8.h-8 { background: linear-gradient(135deg,#6366f1,#7c3aed) !important; box-shadow: 0 8px 20px -6px rgba(124,58,237,.6) !important; } /* Buscador (Ctrl+K) */ .elesis-aurora aside #elesis-search-trigger { background: rgba(15,23,42,.04) !important; border-color: rgba(15,23,42,.08) !important; color: #475569 !important; } .elesis-aurora aside #elesis-search-trigger:hover { background: rgba(15,23,42,.07) !important; } .elesis-aurora aside #elesis-search-trigger .bg-slate-900\/80 { background: #ffffff !important; border-color: #e2e8f0 !important; color: #64748b !important; } /* Enlaces de navegación */ .elesis-aurora aside nav a { color: #475569 !important; border-radius: 0.9rem !important; } .elesis-aurora aside nav a:hover { background: rgba(124,58,237,.07) !important; color: #5b21b6 !important; } .elesis-aurora aside nav a:hover::before { display: none !important; } /* Icono de cada enlace → "chip" redondeado (firma de Aurora) */ .elesis-aurora aside nav a i { width: 30px; height: 30px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(99,102,241,.12); color: #6366f1 !important; font-size: 13px; transition: all .18s cubic-bezier(.4,0,.2,1); } .elesis-aurora aside nav a:hover i { transform: translateY(-1px); } /* Estado activo (bg-blue-600) → píldora violeta translúcida */ .elesis-aurora aside nav a.bg-blue-600 { background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(124,58,237,.14)) !important; color: #5b21b6 !important; box-shadow: none !important; } .elesis-aurora aside nav a.bg-blue-600::before { display: none !important; } /* quita la barra azul de elesis-ui */ .elesis-aurora aside nav a.bg-blue-600 i { background: linear-gradient(135deg,#6366f1,#7c3aed) !important; color: #fff !important; box-shadow: 0 6px 16px -4px rgba(124,58,237,.55); } /* Sección V2 (púrpura) */ .elesis-aurora aside .text-purple-500 { color: #9333ea !important; } .elesis-aurora aside .text-purple-300 { color: #7c3aed !important; } .elesis-aurora aside nav a i.text-purple-400 { background: rgba(147,51,234,.12); color: #9333ea !important; } /* Footer (perfil + logout) */ .elesis-aurora aside .bg-slate-800\/50 { background: linear-gradient(135deg, rgba(99,102,241,.10), rgba(124,58,237,.10)) !important; border: 1px solid rgba(124,58,237,.12) !important; } .elesis-aurora aside .bg-slate-700 { background: linear-gradient(135deg,#6366f1,#7c3aed) !important; color: #fff !important; } .elesis-aurora aside .hover\:text-red-400:hover { color: #f43f5e !important; } /* ============================================================ CONTENIDO · tarjetas glass, inputs, botones, tabla ============================================================ */ /* Tarjetas blancas SÓLIDAS (sin glass: evita transparencias y problemas de apilamiento) */ .elesis-aurora main .bg-white { background: #ffffff !important; border-color: #e9edf5 !important; border-radius: 1.25rem !important; } /* Resultados de búsqueda (typeahead): SÓLIDOS y SIEMPRE por encima de todo */ #res_students, #res_softwares, #res_courses, #live_results, #live_results_course { background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 9999 !important; box-shadow: 0 16px 40px -8px rgba(15,23,42,.22), 0 0 0 1px rgba(15,23,42,.05) !important; } /* Radios más generosos (estética Aurora) */ .elesis-aurora main .rounded-lg { border-radius: 0.9rem !important; } .elesis-aurora main .rounded-xl { border-radius: 1.15rem !important; } /* Inputs / selects / textareas */ .elesis-aurora main input, .elesis-aurora main select, .elesis-aurora main textarea { border-radius: 0.9rem !important; } .elesis-aurora main input:focus, .elesis-aurora main select:focus, .elesis-aurora main textarea:focus { border-color: #7c3aed !important; box-shadow: 0 0 0 4px rgba(124,58,237,.14) !important; } /* Botón primario azul (Nuevo Alumno / Guardar) → degradado violeta */ .elesis-aurora main .bg-blue-600 { background: linear-gradient(135deg,#6366f1,#7c3aed) !important; box-shadow: 0 10px 24px -8px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.25) !important; } .elesis-aurora main .bg-blue-600:hover, .elesis-aurora main .hover\:bg-blue-700:hover { background: linear-gradient(135deg,#4f46e5,#6d28d9) !important; box-shadow: 0 16px 30px -10px rgba(124,58,237,.6) !important; transform: translateY(-2px); } /* Acentos azules de la UI → violeta (insignia de conteo, enlaces, etc.) */ .elesis-aurora main .bg-blue-100 { background: #ede9fe !important; } .elesis-aurora main .text-blue-700 { color: #6d28d9 !important; } .elesis-aurora main .border-blue-200 { border-color: #ddd6fe !important; } .elesis-aurora main .text-blue-500 { color: #7c3aed !important; } .elesis-aurora main .text-blue-200 { color: #c4b5fd !important; } /* Tabla con sabor Aurora */ .elesis-aurora main table thead th { background: rgba(124,58,237,.05) !important; color: #6d28d9 !important; } .elesis-aurora main table tbody tr:hover { background: rgba(124,58,237,.045) !important; } /* Insignias tipo píldora */ .elesis-aurora main .rounded-full { border-radius: 9999px !important; } /* ============================================================ CABECERA HERO (la pone people.php con la clase .aurora-hero) ============================================================ */ .elesis-aurora .aurora-hero { position: relative; overflow: hidden; border-radius: 1.5rem; padding: 1.75rem; color: #fff; background: linear-gradient(120deg,#4f46e5 0%, #7c3aed 55%, #a21caf 100%); box-shadow: 0 20px 40px -16px rgba(124,58,237,.5); } .elesis-aurora .aurora-hero::after { content: ''; position: absolute; right: -3rem; top: -5rem; width: 18rem; height: 18rem; border-radius: 9999px; background: rgba(255,255,255,.12); filter: blur(8px); pointer-events: none; } .elesis-aurora .aurora-hero h1, .elesis-aurora .aurora-hero p { color: #fff !important; } .elesis-aurora .aurora-hero .hero-chip { background: rgba(255,255,255,.20) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.25) !important; backdrop-filter: blur(6px); } /* Botones translúcidos dentro del hero */ .elesis-aurora .aurora-hero .hero-btn { background: rgba(255,255,255,.16) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22) !important; backdrop-filter: blur(6px); box-shadow: none !important; } .elesis-aurora .aurora-hero .hero-btn:hover { background: rgba(255,255,255,.28) !important; transform: translateY(-2px); } /* Botón primario (blanco) dentro del hero */ .elesis-aurora .aurora-hero .hero-btn-primary { background: #ffffff !important; color: #6d28d9 !important; border: none !important; box-shadow: 0 10px 24px -8px rgba(0,0,0,.25) !important; } .elesis-aurora .aurora-hero .hero-btn-primary:hover { background: #f5f3ff !important; transform: translateY(-2px); } /* Modales