/* ============================================ EDUPROFE - MODO OSCURO GLOBAL Se activa con [data-theme="dark"] en Detecta automáticamente prefers-color-scheme ============================================ */ /* Nativos (scrollbars, date pickers): skill dark-mode pública */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } @media (prefers-reduced-motion: no-preference) { html[data-theme] body { transition: background-color 0.2s ease, color 0.2s ease; } } /* --- Variables de tema --- */ :root { --dm-bg-primary: #0f172a; --dm-bg-secondary: #1e293b; --dm-bg-card: #1e293b; --dm-bg-card-hover: #334155; --dm-bg-input: #334155; --dm-border: #475569; --dm-border-light: #475569; --dm-text-primary: #f8fafc; --dm-text-secondary: #e2e8f0; --dm-text-muted: #b8c4d4; --dm-accent: #38bdf8; --dm-accent-hover: #0ea5e9; --dm-shadow: rgba(0, 0, 0, 0.4); --dm-glass-bg: rgba(30, 41, 59, 0.85); --dm-glass-border: rgba(71, 85, 105, 0.4); } /* --- Fondo del body --- */ [data-theme="dark"] body { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%) !important; color: var(--dm-text-primary) !important; } /* --- Fondos de Tailwind --- */ [data-theme="dark"] .bg-white { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border-light) !important; } [data-theme="dark"] .bg-white\/70, [data-theme="dark"] .bg-white\/80, [data-theme="dark"] .bg-white\/85, [data-theme="dark"] .bg-white\/90 { background-color: var(--dm-glass-bg) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .bg-gray-50 { background-color: var(--dm-bg-primary) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .bg-gray-100 { background-color: var(--dm-bg-primary) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .bg-gray-200 { background-color: var(--dm-bg-secondary) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .bg-blue-50 { background-color: rgba(30, 58, 95, 0.5) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .bg-green-50 { background-color: rgba(20, 83, 45, 0.3) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .bg-yellow-50 { background-color: rgba(113, 63, 18, 0.3) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .bg-red-50 { background-color: rgba(127, 29, 29, 0.3) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .bg-purple-50, [data-theme="dark"] .bg-indigo-50 { background-color: rgba(67, 56, 110, 0.3) !important; color: var(--dm-text-primary) !important; } /* --- Textos de Tailwind --- */ [data-theme="dark"] .text-gray-900, [data-theme="dark"] .text-gray-800 { color: var(--dm-text-primary) !important; } [data-theme="dark"] .text-gray-700 { color: var(--dm-text-secondary) !important; } [data-theme="dark"] .text-gray-600 { color: var(--dm-text-secondary) !important; } [data-theme="dark"] .text-gray-500 { color: var(--dm-text-secondary) !important; } [data-theme="dark"] .text-gray-400 { color: var(--dm-text-muted) !important; } [data-theme="dark"] .text-black { color: var(--dm-text-primary) !important; } /* --- Bordes --- */ [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-300 { border-color: var(--dm-border-light) !important; } [data-theme="dark"] .border-gray-100 { border-color: var(--dm-border-light) !important; } [data-theme="dark"] .divide-gray-200 > * + * { border-color: var(--dm-border-light) !important; } /* --- Inputs y Form Controls (no radios/checks: se ven como bloques si se pintan) --- */ [data-theme="dark"] input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"], [type="color"]), [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--dm-bg-input) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--dm-text-muted) !important; } [data-theme="dark"] input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="file"], [type="button"], [type="submit"], [type="reset"]):focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--dm-accent) !important; box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2) !important; } [data-theme="dark"] input:-webkit-autofill, [data-theme="dark"] textarea:-webkit-autofill, [data-theme="dark"] select:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--dm-bg-input) inset !important; -webkit-text-fill-color: var(--dm-text-primary) !important; caret-color: var(--dm-text-primary); } /* --- Tablas --- */ [data-theme="dark"] table { color: var(--dm-text-primary) !important; } [data-theme="dark"] thead { background-color: var(--dm-bg-secondary) !important; } [data-theme="dark"] th { color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] td { color: var(--dm-text-secondary) !important; border-color: var(--dm-border-light) !important; } [data-theme="dark"] tr:hover td { background-color: var(--dm-bg-card-hover) !important; } [data-theme="dark"] tbody tr:nth-child(even) { background-color: rgba(30, 41, 59, 0.5) !important; } /* --- Cards y Paneles --- */ [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-md, [data-theme="dark"] .shadow-lg, [data-theme="dark"] .shadow-xl { box-shadow: 0 4px 12px var(--dm-shadow), 0 1px 3px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .rounded-xl, [data-theme="dark"] .rounded-2xl, [data-theme="dark"] .rounded-lg { border-color: var(--dm-border-light); } /* --- Glassmorphism Override --- */ [data-theme="dark"] .glass-card, [data-theme="dark"] .card-glass { background: var(--dm-glass-bg) !important; border-color: var(--dm-glass-border) !important; } /* Sobrescribe ".glass-card * { color: #1e293b !important }" del inline style */ [data-theme="dark"] .glass-card * { color: var(--dm-text-primary) !important; } /* Excepciones: conservar colores propios de badges y elementos coloreados */ [data-theme="dark"] .glass-card .text-yellow-300, [data-theme="dark"] .glass-card .text-yellow-400 { color: #f59e0b !important; } [data-theme="dark"] .glass-card .text-amber-500 { color: #f59e0b !important; } [data-theme="dark"] .glass-card .bg-yellow-400 span, [data-theme="dark"] .glass-card .bg-yellow-500 span { color: #1e293b !important; } [data-theme="dark"] .glass-card .text-white\/80, [data-theme="dark"] .glass-card .text-white\/60, [data-theme="dark"] .glass-card .text-white\/50, [data-theme="dark"] .glass-card .text-white\/70 { color: #94a3b8 !important; } [data-theme="dark"] .glass-card .text-red-600, [data-theme="dark"] .glass-card .text-red-500 { color: #f87171 !important; } [data-theme="dark"] .glass-card .text-green-600, [data-theme="dark"] .glass-card .text-green-700 { color: #4ade80 !important; } [data-theme="dark"] .glass-nav, [data-theme="dark"] .glass-header { background: rgba(15, 23, 42, 0.85) !important; border-color: var(--dm-glass-border) !important; } /* --- Login Card --- */ [data-theme="dark"] .login-card { background: rgba(30, 41, 59, 0.92) !important; border-color: var(--dm-glass-border) !important; } [data-theme="dark"] .login-input { background: var(--dm-bg-input) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } /* --- Navegación (Profesor, Padre) --- */ [data-theme="dark"] #navbar { background-color: rgba(15, 23, 42, 0.85) !important; border-color: var(--dm-glass-border) !important; } /* Móvil: navbar abierto con fondo sólido oscuro */ [data-theme="dark"] #navbar.show { background-color: rgba(15, 23, 42, 0.99) !important; } [data-theme="dark"] .nav-link { background-color: rgba(51, 65, 85, 0.4) !important; color: var(--dm-text-secondary) !important; border-color: var(--dm-glass-border) !important; } [data-theme="dark"] .nav-link:hover { background-color: rgba(51, 65, 85, 0.7) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .nav-active, [data-theme="dark"] .nav-link.active { background-color: rgba(56, 189, 248, 0.25) !important; color: var(--dm-accent) !important; } /* --- Sidebar Admin --- */ [data-theme="dark"] aside.bg-gray-900 { background-color: #0c1222 !important; } [data-theme="dark"] .sidebar-link:hover { background-color: var(--dm-bg-card-hover) !important; } /* --- Header de portales alumno / familia (no todos los
de la web) --- */ [data-theme="dark"] header.ep-dash-header { background: linear-gradient(135deg, #0c4a6e 0%, #075985 55%, #0e7490 100%) !important; } /* --- Mobile hamburger bar --- */ [data-theme="dark"] .md\:hidden.bg-white { background-color: var(--dm-bg-secondary) !important; } [data-theme="dark"] .hamburger span { background: var(--dm-text-secondary) !important; } /* --- Modals --- */ [data-theme="dark"] .modal, [data-theme="dark"] [class*="modal"] { color: var(--dm-text-primary); } [data-theme="dark"] .modal .bg-white, [data-theme="dark"] [class*="modal"] .bg-white { background-color: var(--dm-bg-card) !important; } /* --- Alertas y mensajes --- */ [data-theme="dark"] .bg-green-100 { background-color: rgba(20, 83, 45, 0.4) !important; color: #86efac !important; } [data-theme="dark"] .bg-red-100 { background-color: rgba(127, 29, 29, 0.4) !important; color: #fca5a5 !important; } [data-theme="dark"] .bg-yellow-100 { background-color: rgba(113, 63, 18, 0.4) !important; color: #fde68a !important; } [data-theme="dark"] .bg-blue-100 { background-color: rgba(30, 58, 95, 0.4) !important; color: #93c5fd !important; } /* --- Badges --- */ [data-theme="dark"] .bg-green-500, [data-theme="dark"] .bg-green-600 { background-color: #16a34a !important; } [data-theme="dark"] .bg-red-500, [data-theme="dark"] .bg-red-600 { background-color: #dc2626 !important; } /* --- Analytics Cards --- */ [data-theme="dark"] .analytics-gradient { background: linear-gradient(135deg, #0e7490 0%, #0284c7 50%, #0369a1 100%) !important; } /* --- Tickets profesor --- */ [data-theme="dark"] .crystal-bg, [data-theme="dark"] .crystal-card { background: rgba(15, 23, 42, 0.82) !important; color: var(--dm-text-primary) !important; border-color: rgba(71, 85, 105, 0.5) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] #pago-modal .rounded-lg, [data-theme="dark"] #canjeo-modal .rounded-lg, [data-theme="dark"] #editar-fecha-modal .rounded-lg { border-color: var(--dm-border-light) !important; } [data-theme="dark"] #pago-resumen { background: rgba(30, 58, 95, 0.55) !important; color: #bfdbfe !important; border-color: rgba(96, 165, 250, 0.35) !important; } /* --- Scrollbar Oscura --- */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dm-bg-primary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dm-border); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--dm-text-muted); } /* --- Hover effects en dark --- */ [data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--dm-bg-card-hover) !important; } [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--dm-bg-card-hover) !important; } /* --- Context Menu (Profesor calendario) --- */ [data-theme="dark"] .context-menu { background-color: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; } [data-theme="dark"] .context-menu-item:hover { background-color: var(--dm-bg-card-hover) !important; } /* --- Time Slots (mantener colores de estado) --- */ [data-theme="dark"] .time-slot.unavailable { background-color: #475569 !important; color: #94a3b8 !important; } /* --- Select / Option dark --- */ [data-theme="dark"] option { background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } /* --- Links genéricos --- */ [data-theme="dark"] a.text-blue-600, [data-theme="dark"] a.text-blue-700, [data-theme="dark"] .text-blue-600, [data-theme="dark"] .text-blue-700 { color: var(--dm-accent) !important; } [data-theme="dark"] a.text-blue-600:hover, [data-theme="dark"] a.text-blue-700:hover { color: var(--dm-accent-hover) !important; } /* --- Registro/Formularios públicos --- */ [data-theme="dark"] .bg-sky-50, [data-theme="dark"] .bg-sky-100 { background-color: rgba(12, 74, 110, 0.3) !important; } [data-theme="dark"] .bg-amber-50 { background-color: rgba(120, 53, 15, 0.35) !important; } [data-theme="dark"] .text-amber-600 { color: #fcd34d !important; } [data-theme="dark"] .border-sky-100\/50 { border-color: rgba(56, 189, 248, 0.35) !important; } /* --- Ajustes específicos del bloque RGA en alumno.php --- */ [data-theme="dark"] #rga .bg-gradient-to-br { background-image: linear-gradient(135deg, rgba(12, 74, 110, 0.45) 0%, rgba(49, 46, 129, 0.45) 100%) !important; } [data-theme="dark"] #rga .text-gray-800, [data-theme="dark"] #rga .text-gray-600 { color: #e2e8f0 !important; } [data-theme="dark"] #rga .bg-sky-100 { background-color: rgba(14, 116, 144, 0.35) !important; } /* Fondo principal de la tarjeta RGA en alumno.php */ [data-theme="dark"] #rga > div[style*="linear-gradient"] { background: linear-gradient(135deg, rgba(12, 74, 110, 0.5) 0%, rgba(49, 46, 129, 0.5) 40%, rgba(112, 26, 117, 0.35) 100%) !important; border-color: var(--dm-border) !important; } /* Esferas decorativas en la tarjeta RGA */ [data-theme="dark"] #rga .bg-white\/20, [data-theme="dark"] #rga .bg-sky-200\/30 { opacity: 0.15 !important; } /* Caja del logo RGA */ [data-theme="dark"] #rga .bg-white\/70 { background-color: rgba(30, 41, 59, 0.7) !important; border-color: var(--dm-border) !important; } /* Subtítulo RGA */ [data-theme="dark"] #rga .text-indigo-500\/80 { color: #a5b4fc !important; } /* Botón secundario Mis Cursos */ [data-theme="dark"] #rga .bg-white\/70[class*="text-indigo"], [data-theme="dark"] #rga a.bg-white\/70 { background-color: rgba(30, 41, 59, 0.7) !important; color: #a5b4fc !important; border-color: rgba(99, 102, 241, 0.4) !important; } /* Tarjetas de cursos matriculados */ [data-theme="dark"] #rga .bg-white\/60 { background-color: rgba(30, 41, 59, 0.6) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] #rga .bg-white\/60:hover, [data-theme="dark"] #rga .bg-white\/90 { background-color: rgba(51, 65, 85, 0.8) !important; } [data-theme="dark"] #rga .text-gray-400 { color: var(--dm-text-muted) !important; } /* --- RGA Página completa (nav, botones, vistas de cursos) --- */ [data-theme="dark"] .nav-glass { background: rgba(15, 23, 42, 0.85) !important; border-bottom-color: var(--dm-border) !important; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.3) !important; } [data-theme="dark"] .crystal-button { background: rgba(30, 41, 59, 0.7) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .crystal-button:hover { background: rgba(51, 65, 85, 0.85) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; } /* Tarjetas de cursos en RGA (mis_cursos.php) */ [data-theme="dark"] .mc-curso-card, [data-theme="dark"] .course-card { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .mc-curso-card:hover, [data-theme="dark"] .course-card:hover { background-color: var(--dm-bg-card-hover) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .mc-curso-card .font-semibold, [data-theme="dark"] .mc-curso-card h3, [data-theme="dark"] .course-card h3, [data-theme="dark"] .course-card .font-bold { color: var(--dm-text-primary) !important; } [data-theme="dark"] .mc-curso-card .text-gray-500, [data-theme="dark"] .mc-curso-card .text-sm.text-gray-500, [data-theme="dark"] .course-card .text-gray-500 { color: var(--dm-text-muted) !important; } [data-theme="dark"] .mc-curso-card .text-gray-400, [data-theme="dark"] .course-card .text-gray-400 { color: var(--dm-text-muted) !important; } [data-theme="dark"] .mc-curso-card .text-gray-300 { color: #64748b !important; } [data-theme="dark"] .mc-curso-card a:hover { color: #93c5fd !important; } [data-theme="dark"] .course-card .p-5 { background: var(--dm-bg-card) !important; } /* Barra de progreso */ [data-theme="dark"] .mc-curso-card .bg-gray-200 { background-color: #334155 !important; } /* Badges genéricos para RGA */ [data-theme="dark"] .text-green-700 { color: #4ade80 !important; } [data-theme="dark"] .text-green-800 { color: #86efac !important; } [data-theme="dark"] .text-purple-700 { color: #c4b5fd !important; } [data-theme="dark"] .bg-purple-100 { background-color: rgba(88, 28, 135, 0.35) !important; color: #c4b5fd !important; } [data-theme="dark"] .border-yellow-200 { border-color: rgba(202, 138, 4, 0.4) !important; } [data-theme="dark"] .border-white\/60, [data-theme="dark"] .border-white\/80 { border-color: var(--dm-border) !important; } /* Badges de color genéricos */ [data-theme="dark"] .bg-indigo-100 { background-color: rgba(67, 56, 129, 0.4) !important; } [data-theme="dark"] .text-indigo-700, [data-theme="dark"] .text-indigo-600 { color: #a5b4fc !important; } [data-theme="dark"] .border-indigo-200 { border-color: rgba(99, 102, 241, 0.35) !important; } [data-theme="dark"] .border-green-200 { border-color: rgba(22, 163, 74, 0.35) !important; } /* Hover genéricos Tailwind variants */ [data-theme="dark"] .hover\:bg-gray-50:hover { background-color: var(--dm-bg-card-hover) !important; } [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--dm-bg-card-hover) !important; } [data-theme="dark"] .hover\:text-indigo-600:hover { color: #818cf8 !important; } [data-theme="dark"] .hover\:bg-white\/90:hover { background-color: rgba(51, 65, 85, 0.85) !important; } [data-theme="dark"] .hover\:shadow-md:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important; } [data-theme="dark"] .hover\:shadow-lg:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; } /* Drag handle en modo organizar */ [data-theme="dark"] .mc-drag-handle.bg-gray-50 { background-color: var(--dm-bg-primary) !important; } /* Home RGA: category badges */ [data-theme="dark"] .course-card .bg-white\/90 { background-color: rgba(30, 41, 59, 0.85) !important; color: var(--dm-text-secondary) !important; } [data-theme="dark"] .course-card .text-gray-700 { color: var(--dm-text-secondary) !important; } [data-theme="dark"] .course-card .text-gray-600 { color: var(--dm-text-secondary) !important; } /* --- Widget de Mensajería (modo oscuro) --- */ [data-theme="dark"] .msg-panel { background: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6) !important; } [data-theme="dark"] .msg-panel.msg-expanded { background: var(--dm-bg-card) !important; } [data-theme="dark"] .msg-panel-header { background: linear-gradient(135deg, #075985, #4338ca) !important; } [data-theme="dark"] .msg-panel-body { background: var(--dm-bg-card) !important; } /* Badge de no leídos */ [data-theme="dark"] .msg-badge { border-color: var(--dm-bg-card) !important; } /* Lista de conversaciones */ [data-theme="dark"] .msg-conv-list { background: var(--dm-bg-card) !important; } [data-theme="dark"] .msg-conv-item { border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .msg-conv-item:hover { background: var(--dm-bg-card-hover) !important; } [data-theme="dark"] .msg-conv-item .font-semibold, [data-theme="dark"] .msg-conv-item .text-gray-800, [data-theme="dark"] .msg-conv-item [style*="overflow:hidden"] .font-semibold { color: var(--dm-text-primary) !important; } [data-theme="dark"] .msg-conv-item .text-gray-500, [data-theme="dark"] .msg-conv-item .text-xs.text-gray-500 { color: var(--dm-text-muted) !important; } [data-theme="dark"] .msg-conv-item .text-gray-400, [data-theme="dark"] .msg-conv-item .text-xs.text-gray-400 { color: #64748b !important; } /* Estado vacío / carga */ [data-theme="dark"] .msg-conv-list .text-gray-400, [data-theme="dark"] .msg-conv-list .text-gray-500, [data-theme="dark"] .msg-chat-messages .text-gray-400, [data-theme="dark"] .msg-panel-body .text-center .text-gray-400 { color: var(--dm-text-muted) !important; } /* Vista de chat */ [data-theme="dark"] .msg-chat-header { background: var(--dm-bg-secondary) !important; border-bottom-color: var(--dm-border) !important; } [data-theme="dark"] .msg-chat-header .text-gray-800, [data-theme="dark"] .msg-chat-header .font-semibold { color: var(--dm-text-primary) !important; } [data-theme="dark"] .msg-chat-header .text-gray-500, [data-theme="dark"] .msg-chat-header .text-xs { color: var(--dm-text-muted) !important; } [data-theme="dark"] .msg-chat-header button { color: var(--dm-text-muted) !important; } [data-theme="dark"] .msg-chat-messages { background: var(--dm-bg-primary) !important; } /* Burbujas de mensaje */ [data-theme="dark"] .msg-chat-mine { background: #1d4ed8 !important; color: #ffffff !important; } [data-theme="dark"] .msg-chat-other { background: var(--dm-bg-card-hover) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .msg-chat-other .msg-chat-time { color: var(--dm-text-muted) !important; } [data-theme="dark"] .msg-chat-other a { color: var(--dm-accent) !important; } [data-theme="dark"] .msg-chat-mine a { color: #bfdbfe !important; } /* Área de input */ [data-theme="dark"] .msg-chat-input-area { background: var(--dm-bg-secondary) !important; border-top-color: var(--dm-border) !important; } [data-theme="dark"] .msg-chat-input-area textarea { background: var(--dm-bg-input) !important; color: var(--dm-text-primary) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .msg-chat-input-area textarea::placeholder { color: var(--dm-text-muted) !important; } [data-theme="dark"] .msg-chat-input-area textarea:focus { border-color: #38bdf8 !important; } [data-theme="dark"] .msg-chat-input-area button, [data-theme="dark"] .msg-chat-input-area svg { color: var(--dm-text-muted) !important; } [data-theme="dark"] .msg-chat-send { background: #0284c7 !important; color: white !important; } [data-theme="dark"] .msg-chat-send:hover { background: #0369a1 !important; } [data-theme="dark"] .msg-chat-send:disabled { background: #334155 !important; color: #64748b !important; } [data-theme="dark"] .msg-chat-send svg { color: white !important; } /* Preview de archivo adjunto */ [data-theme="dark"] #msgFilePreview { background: var(--dm-bg-input) !important; color: var(--dm-text-secondary) !important; } /* Audio player dentro del chat */ [data-theme="dark"] .msg-chat-bubble audio { filter: invert(1) hue-rotate(180deg); border-radius: 20px; } /* --- Sección Reservar Clase (padre.php #reservar) --- */ [data-theme="dark"] #reservar { background: var(--dm-bg-card) !important; background-image: none !important; border-color: rgba(234, 179, 8, 0.35) !important; } [data-theme="dark"] #reservar .bg-yellow-300\/20, [data-theme="dark"] #reservar .bg-sky-300\/20 { display: none !important; } [data-theme="dark"] #reservar .bg-yellow-400 { background-color: rgba(234, 179, 8, 0.7) !important; } [data-theme="dark"] #reservar label, [data-theme="dark"] #reservar h2, [data-theme="dark"] #reservar h3, [data-theme="dark"] #reservar h4 { color: var(--dm-text-primary) !important; } [data-theme="dark"] #reservar p { color: var(--dm-text-muted) !important; } [data-theme="dark"] #reservar select { background-color: var(--dm-bg-input) !important; color: var(--dm-text-primary) !important; border-color: rgba(234, 179, 8, 0.5) !important; } [data-theme="dark"] #reservar .bg-white.border.border-gray-200 { background-color: var(--dm-bg-secondary) !important; border-color: var(--dm-border-light) !important; } [data-theme="dark"] #reservar .bg-gray-50 { background-color: var(--dm-bg-primary) !important; } [data-theme="dark"] #reservar .bg-white.border.hover\:bg-gray-100 { background-color: var(--dm-bg-card) !important; color: var(--dm-text-secondary) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] #reservar .bg-white.border.hover\:bg-gray-100:hover { background-color: var(--dm-bg-card-hover) !important; } [data-theme="dark"] #calendar-grid .bg-gray-100 { background-color: var(--dm-bg-secondary) !important; color: var(--dm-text-secondary) !important; } [data-theme="dark"] #calendar-grid .bg-white { background-color: var(--dm-bg-primary) !important; border-color: var(--dm-border-light) !important; } [data-theme="dark"] #slot-menu-floating { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; } [data-theme="dark"] #slot-menu-floating .bg-gray-200 { background-color: var(--dm-bg-card-hover) !important; color: var(--dm-text-primary) !important; } /* --- Sección Cursos y Packs (padre.php #cursos-y-packs-top) --- */ [data-theme="dark"] #cursos-y-packs-top { background: var(--dm-bg-card) !important; background-image: none !important; border-color: rgba(236, 72, 153, 0.3) !important; } [data-theme="dark"] #cursos-y-packs-top .bg-green-100, [data-theme="dark"] #cursos-y-packs-top .border-green-100 { background-color: rgba(20, 83, 45, 0.25) !important; border-color: rgba(34, 197, 94, 0.3) !important; } /* --- Gestión de Packs (profesor_packs.php #admin-container) --- */ [data-theme="dark"] #admin-container .bg-green-50 { background-color: rgba(20, 83, 45, 0.25) !important; border-color: rgba(34, 197, 94, 0.3) !important; } [data-theme="dark"] #admin-container .bg-green-50 .text-green-800, [data-theme="dark"] #admin-container .text-green-700 { color: #86efac !important; } [data-theme="dark"] #admin-container .bg-indigo-50 { background-color: rgba(67, 56, 110, 0.3) !important; border-color: rgba(129, 140, 248, 0.3) !important; } [data-theme="dark"] #admin-container .text-indigo-800 { color: #a5b4fc !important; } [data-theme="dark"] #admin-container .text-indigo-500 { color: #818cf8 !important; } [data-theme="dark"] #admin-container .bg-sky-100 { background-color: rgba(14, 116, 170, 0.3) !important; } [data-theme="dark"] #admin-container .text-sky-800, [data-theme="dark"] #admin-container .text-sky-700 { color: #7dd3fc !important; } [data-theme="dark"] #admin-container .bg-sky-50 { background-color: rgba(14, 116, 170, 0.15) !important; } /* --- Iconos SVG y emojis --- */ [data-theme="dark"] svg { color: inherit; } /* --- Botón Toggle de Modo Oscuro --- */ .dark-mode-toggle { position: fixed; bottom: 20px; left: 20px; z-index: 10000; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 0; line-height: 1; } .dark-mode-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); } [data-theme="dark"] .dark-mode-toggle { background: rgba(30, 41, 59, 0.8); border-color: var(--dm-border); } /* Si hay widgets flotantes (chatbot/mensajeria) y NO hay traductor: arriba-izquierda */ body.has-support-widget:not(:has(#ep-translate-wrap)) .dark-mode-toggle { top: 84px; bottom: auto; left: 16px; right: auto; } /* Junto al botón de idioma (🌐): misma columna, justo encima — SOLO sin dock de chat */ body:has(#ep-translate-wrap):not(:has(#ep-chat-hub)) .dark-mode-toggle, body:has(#ep-gerbi):not(:has(#ep-chat-hub)) .dark-mode-toggle, body.has-gerbi:not(:has(#ep-chat-hub)) .dark-mode-toggle { top: auto; /* 24px suelo + 52px 🌐 + 10px gap */ bottom: calc(24px + 52px + 10px + env(safe-area-inset-bottom, 0px)); left: auto; right: max(20px, env(safe-area-inset-right, 0px)); } /* Con chat/mensajería + traductor visible (sin dock Gerbi): subir el stack */ body.has-support-widget:has(#ep-translate-wrap):not(:has(#ep-chat-hub)) .dark-mode-toggle { bottom: calc(24px + 52px + 10px + 5.25rem + env(safe-area-inset-bottom, 0px)); } /* Dock Gerbi (#ep-chat-hub): 🌙 arriba-izquierda (refuerzo; también en chatbot_widget) */ body:has(#ep-chat-hub) .dark-mode-toggle, body.has-ep-dock .dark-mode-toggle { top: 84px !important; bottom: auto !important; left: max(16px, env(safe-area-inset-left, 0px)) !important; right: auto !important; } /* --- Tooltip del botón --- */ .dark-mode-toggle::after { content: attr(data-tooltip); position: absolute; top: calc(100% + 8px); left: 0; background: rgba(0, 0, 0, 0.8); color: #fff; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .dark-mode-toggle:hover::after { opacity: 1; } /* --- Transición suave al cambiar tema --- */ html[data-theme], html:not([data-theme]) { transition: background-color 0.3s ease, color 0.3s ease; } html[data-theme] body, html:not([data-theme]) body { transition: background 0.3s ease, color 0.3s ease; } /* --- Responsivo: ajustes móviles --- */ @media (max-width: 640px) { .dark-mode-toggle { bottom: 14px; left: 14px; width: 42px; height: 42px; font-size: 1.15rem; } body.has-support-widget:not(:has(#ep-translate-wrap)) .dark-mode-toggle { top: 72px; bottom: auto; left: 12px; right: auto; } body:has(#ep-translate-wrap):not(:has(#ep-chat-hub)) .dark-mode-toggle, body:has(#ep-gerbi):not(:has(#ep-chat-hub)) .dark-mode-toggle, body.has-gerbi:not(:has(#ep-chat-hub)) .dark-mode-toggle { top: auto; bottom: calc(20px + 52px + 8px + env(safe-area-inset-bottom, 0px)); left: auto; right: max(14px, env(safe-area-inset-right, 0px)); } body.has-support-widget:has(#ep-translate-wrap):not(:has(#ep-chat-hub)) .dark-mode-toggle { bottom: calc(20px + 52px + 8px + 5rem + env(safe-area-inset-bottom, 0px)); } body:has(#ep-chat-hub) .dark-mode-toggle, body.has-ep-dock .dark-mode-toggle { top: 72px !important; bottom: auto !important; left: 12px !important; right: auto !important; } } /* --- eduprofe.php: colores azul oscuro que se vuelven invisibles en dark --- */ [data-theme="dark"] .text-blue-900, [data-theme="dark"] .text-blue-800, [data-theme="dark"] .\!text-blue-900, [data-theme="dark"] .\!text-blue-800 { color: #7dd3fc !important; } [data-theme="dark"] .text-blue-700, [data-theme="dark"] .\!text-blue-700 { color: #93c5fd !important; } [data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-slate-600, [data-theme="dark"] .\!text-slate-700 { color: var(--dm-text-secondary) !important; } /* Glass badge (reloj en hero) */ [data-theme="dark"] .glass-badge { background: rgba(15, 23, 42, 0.75) !important; border-color: rgba(71, 85, 105, 0.5) !important; color: var(--dm-text-primary) !important; } /* Glass card hover – evitar que vuelva a blanco */ [data-theme="dark"] .glass-card:hover { background: rgba(30, 41, 59, 0.95) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(71, 85, 105, 0.4) !important; } /* Tarjetas "bg-blue-50/60" y "hover:bg-blue-100/60" dentro de glass-card */ [data-theme="dark"] .bg-blue-50\/60, [data-theme="dark"] .hover\:bg-blue-100\/60:hover { background-color: rgba(30, 58, 95, 0.35) !important; } /* Texto "text-blue-700/70" (subtítulos de tarjetas de novedades) */ [data-theme="dark"] .text-blue-700\/70 { color: #93c5fd !important; } /* Subheading hero ("text-blue-800/70") */ [data-theme="dark"] .text-blue-800\/70 { color: #bae6fd !important; } /* Subtítulo Pack PAU ("text-blue-800/60") y contacto ("text-blue-800/40") */ [data-theme="dark"] .text-blue-800\/60, [data-theme="dark"] .text-blue-800\/40 { color: #93c5fd !important; } /* Heading "Para el Curso 25/26" dentro de glass-card */ [data-theme="dark"] .text-blue-900.border-b { border-color: rgba(71, 85, 105, 0.4) !important; } /* bg-amber-50 + border-amber-300 (bloque descuentos PAU) */ [data-theme="dark"] .border-amber-300\/50 { border-color: rgba(217, 119, 6, 0.4) !important; } /* text-amber-700 (dentro del bloque descuentos) */ [data-theme="dark"] .text-amber-700 { color: #fcd34d !important; } /* text-amber-800 (badges de descuento) */ [data-theme="dark"] .text-amber-800 { color: #fde68a !important; } /* bg-amber-100 (badges de descuento) */ [data-theme="dark"] .bg-amber-100 { background-color: rgba(120, 53, 15, 0.4) !important; } /* CTA "Mas informacion" (bg-white dentro de glass-card) */ [data-theme="dark"] .glass-card a.bg-white, [data-theme="dark"] .glass-card a.hover\:bg-blue-50 { background-color: var(--dm-bg-secondary) !important; color: #7dd3fc !important; border-color: var(--dm-border) !important; } [data-theme="dark"] .glass-card a.bg-white:hover { background-color: var(--dm-bg-card-hover) !important; } /* ─── Colores Tailwind text-slate-* que faltaban globalmente ─── */ [data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-slate-900 { color: var(--dm-text-primary) !important; } [data-theme="dark"] .text-slate-500 { color: var(--dm-text-muted) !important; } /* ─── text-sky-* fuera de #admin-container ─── */ [data-theme="dark"] .text-sky-700, [data-theme="dark"] .text-sky-800 { color: #7dd3fc !important; } /* ─── text-emerald / teal ─── */ [data-theme="dark"] .text-emerald-700, [data-theme="dark"] .text-teal-700 { color: #6ee7b7 !important; } /* ─── Sección Geografía: gradientes bg-gradient + from/to ─── */ [data-theme="dark"] .from-sky-50, [data-theme="dark"] .from-amber-50, [data-theme="dark"] .from-emerald-50, [data-theme="dark"] .from-indigo-50, [data-theme="dark"] .from-rose-50, [data-theme="dark"] .from-violet-50 { --tw-gradient-from: var(--dm-bg-secondary) !important; } [data-theme="dark"] .to-white, [data-theme="dark"] .via-white { --tw-gradient-to: var(--dm-bg-primary) !important; } /* Nav sticky geography bg-white + border */ [data-theme="dark"] nav.sticky .text-slate-600 { color: var(--dm-text-secondary) !important; } /* ════════════════════════════════════════════════════ AULA MODULE — DARK MODE OVERRIDES (el módulo aula usa text-slate-* y bg-white inline) ════════════════════════════════════════════════════ */ /* ─── text-slate-* ─── */ [data-theme="dark"] .text-slate-900, [data-theme="dark"] .text-slate-800 { color: #f1f5f9 !important; } [data-theme="dark"] .text-slate-700 { color: #e2e8f0 !important; } [data-theme="dark"] .text-slate-600 { color: #cbd5e1 !important; } [data-theme="dark"] .text-slate-500 { color: #94a3b8 !important; } [data-theme="dark"] .text-slate-400 { color: #64748b !important; } /* ─── bg-slate-* ─── */ [data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-slate-100 { background-color: var(--dm-bg-secondary) !important; color: #f1f5f9 !important; } [data-theme="dark"] .bg-slate-200 { background-color: #334155 !important; color: #f1f5f9 !important; } [data-theme="dark"] .bg-slate-800 { background-color: #0f172a !important; } /* ─── border-slate-* ─── */ [data-theme="dark"] .border-slate-100, [data-theme="dark"] .border-slate-200, [data-theme="dark"] .border-slate-300 { border-color: #334155 !important; } /* ─── Aula cards con bg-white (index, grupos, areas, etc.) ─── */ [data-theme="dark"] .aula-card, [data-theme="dark"] .ep-card { background: #1e293b !important; border-color: rgba(51, 65, 85, .8) !important; color: #f1f5f9 !important; } /* Cards de grupos y áreas con bg-white hardcodeado */ [data-theme="dark"] a.bg-white, [data-theme="dark"] div.bg-white { background-color: #1e293b !important; color: #f1f5f9 !important; } [data-theme="dark"] a.bg-white:hover, [data-theme="dark"] div.bg-white:hover { background-color: #263548 !important; } /* ─── Sidebar del Aula ─── */ [data-theme="dark"] .aula-sidebar { background: rgba(10, 17, 35, .95) !important; border-right-color: rgba(51, 65, 85, .8) !important; } [data-theme="dark"] .aula-link { color: #cbd5e1 !important; } [data-theme="dark"] .aula-link:hover { background: rgba(14, 165, 233, .12) !important; color: #7dd3fc !important; } /* ─── Header principal del Aula ─── */ [data-theme="dark"] .aula-sidebar + main header h1, [data-theme="dark"] main > header h1 { color: #f1f5f9 !important; } /* ─── Hover states en dark ─── */ [data-theme="dark"] .hover\:bg-sky-50:hover { background-color: rgba(14, 165, 233, .1) !important; } [data-theme="dark"] .hover\:bg-violet-50:hover { background-color: rgba(139, 92, 246, .1) !important; } [data-theme="dark"] .hover\:bg-emerald-50:hover { background-color: rgba(16, 185, 129, .1) !important; } [data-theme="dark"] .hover\:bg-fuchsia-50:hover { background-color: rgba(217, 70, 239, .1) !important; } /* ─── border-dashed en dark ─── */ [data-theme="dark"] .border-dashed { border-color: #334155 !important; } /* ─── Tab bar del Aula ─── */ [data-theme="dark"] .ep-tab { color: #94a3b8 !important; } [data-theme="dark"] .ep-tab:hover { background: rgba(14, 165, 233, .08) !important; color: #7dd3fc !important; } [data-theme="dark"] .ep-tab.active { color: #a5b4fc !important; border-bottom-color: #6366f1 !important; } /* ─── Code blocks ─── */ [data-theme="dark"] .ep-code, [data-theme="dark"] code { background: rgba(30, 41, 59, .9) !important; color: #a5b4fc !important; border-color: #334155 !important; } /* ─── Admin-externo banner ─── */ [data-theme="dark"] .border-fuchsia-300 { border-color: rgba(192, 38, 211, .5) !important; } [data-theme="dark"] .text-fuchsia-900 { color: #e879f9 !important; } /* ─── Spinner overlay ─── */ [data-theme="dark"] .ep-loading-overlay { background: rgba(10, 17, 35, .8) !important; } /* ════════════════════════════════════════════════════ MODO CLARO EXPLÍCITO — [data-theme="light"] Anula @media(prefers-color-scheme:dark) cuando el OS está en oscuro pero el usuario eligió modo claro. ════════════════════════════════════════════════════ */ [data-theme="light"] body { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f5f3ff 100%) !important; color: #334155 !important; } /* Deshacer bg-white que dark-mode puso en oscuro */ [data-theme="light"] .bg-white { background-color: #ffffff !important; /* No forzar color aquí: las clases text-* del elemento deben ganar. Si no hay clase explícita, se hereda del documento (color oscuro por defecto). */ border-color: rgba(226, 232, 240, .8) !important; } [data-theme="light"] .bg-white\/70, [data-theme="light"] .bg-white\/80, [data-theme="light"] .bg-white\/85, [data-theme="light"] .bg-white\/90 { background-color: rgba(255, 255, 255, .85) !important; color: inherit !important; } /* Tailwind grays → light */ [data-theme="light"] .bg-gray-50 { background-color: #f9fafb !important; color: #111827 !important; } [data-theme="light"] .bg-gray-100 { background-color: #f3f4f6 !important; color: #111827 !important; } [data-theme="light"] .bg-gray-200 { background-color: #e5e7eb !important; } [data-theme="light"] .bg-gray-700 { background-color: #374151 !important; } [data-theme="light"] .bg-gray-800 { background-color: #1f2937 !important; } [data-theme="light"] .bg-gray-900 { background-color: #111827 !important; } /* text-gray → light */ [data-theme="light"] .text-gray-900 { color: #111827 !important; } [data-theme="light"] .text-gray-800 { color: #1f2937 !important; } [data-theme="light"] .text-gray-700 { color: #374151 !important; } [data-theme="light"] .text-gray-600 { color: #4b5563 !important; } [data-theme="light"] .text-gray-500 { color: #6b7280 !important; } [data-theme="light"] .text-gray-400 { color: #9ca3af !important; } /* text-slate → light */ [data-theme="light"] .text-slate-900 { color: #0f172a !important; } [data-theme="light"] .text-slate-800 { color: #1e293b !important; } [data-theme="light"] .text-slate-700 { color: #334155 !important; } [data-theme="light"] .text-slate-600 { color: #475569 !important; } [data-theme="light"] .text-slate-500 { color: #64748b !important; } [data-theme="light"] .text-slate-400 { color: #94a3b8 !important; } /* bg-slate → light */ [data-theme="light"] .bg-slate-50 { background-color: #f8fafc !important; color: #0f172a !important; } [data-theme="light"] .bg-slate-100 { background-color: #f1f5f9 !important; color: #0f172a !important; } [data-theme="light"] .bg-slate-200 { background-color: #e2e8f0 !important; } [data-theme="light"] .bg-slate-800 { background-color: #1e293b !important; } /* border-slate → light */ [data-theme="light"] .border-slate-100, [data-theme="light"] .border-slate-200, [data-theme="light"] .border-slate-300 { border-color: rgba(226, 232, 240, .8) !important; } [data-theme="light"] .border-dashed { border-color: #cbd5e1 !important; } /* bg-blue-50 y similares → light */ [data-theme="light"] .bg-blue-50 { background-color: #eff6ff !important; } [data-theme="light"] .bg-indigo-50 { background-color: #eef2ff !important; } [data-theme="light"] .bg-sky-50 { background-color: #f0f9ff !important; } /* Borders */ [data-theme="light"] .border-gray-100, [data-theme="light"] .border-gray-200, [data-theme="light"] .border-gray-300 { border-color: #d1d5db !important; } [data-theme="light"] .border-blue-100, [data-theme="light"] .border-blue-200 { border-color: #bfdbfe !important; } /* Inputs */ [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background-color: #ffffff !important; color: #1e293b !important; border-color: rgba(226, 232, 240, .8) !important; } [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #94a3b8 !important; } /* Hover states → light */ [data-theme="light"] .hover\:bg-sky-50:hover { background-color: #f0f9ff !important; } [data-theme="light"] .hover\:bg-violet-50:hover { background-color: #f5f3ff !important; } [data-theme="light"] .hover\:bg-emerald-50:hover { background-color: #ecfdf5 !important; } [data-theme="light"] .hover\:bg-fuchsia-50:hover { background-color: #fdf4ff !important; } /* Cards AULA → light */ [data-theme="light"] .ep-card, [data-theme="light"] .aula-card { background: #ffffff !important; border-color: rgba(226, 232, 240, .8) !important; color: #334155 !important; } [data-theme="light"] a.bg-white, [data-theme="light"] div.bg-white { background-color: #ffffff !important; color: #334155 !important; } /* ════════════════════════════════════════════════════ AULA DEL DOCENTE (RGA) → MODO CLARO Anula los colores oscuros hardcodeados en aula.php ════════════════════════════════════════════════════ */ [data-theme="light"] { --aula-bg: #fef9f0; --aula-card: #ffffff; --aula-border: #e5d5c0; --aula-accent: #c07000; --aula-accent2: #dc2626; --aula-text: #2c1810; --aula-muted: #7c5a46; } /* Hero del Aula */ [data-theme="light"] .aula-hero { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 40%, #fcd34d 70%, #fef3c7 100%) !important; } [data-theme="light"] .aula-hero::before { background: radial-gradient(ellipse 70% 60% at 80% 40%, rgba(245,158,11,0.18) 0%, transparent 70%), radial-gradient(ellipse 50% 40% at 20% 70%, rgba(239,68,68,0.10) 0%, transparent 60%) !important; } /* Body del Aula */ [data-theme="light"] .aula-body { background: #fef9f0 !important; color: #2c1810 !important; } /* Tab bar */ [data-theme="light"] .aula-tab-bar { background: rgba(254, 249, 240, 0.97) !important; border-bottom-color: #e5d5c0 !important; } [data-theme="light"] .aula-tab { color: #7c5a46 !important; } [data-theme="light"] .aula-tab:hover { color: #c07000 !important; } [data-theme="light"] .aula-tab.active { color: #c07000 !important; border-bottom-color: #c07000 !important; } /* Tarjetas del Aula */ [data-theme="light"] .aula-card { background: #ffffff !important; border-color: #e5d5c0 !important; color: #2c1810 !important; } [data-theme="light"] .aula-card:hover { border-color: rgba(192,112,0,0.4) !important; } /* Títulos del Aula */ [data-theme="light"] .aula-h2 { color: #c07000 !important; } [data-theme="light"] .aula-h3 { color: #92400e !important; } /* Pills del Aula */ [data-theme="light"] .aula-pill { background: rgba(245,158,11,0.12) !important; border-color: rgba(192,112,0,0.3) !important; color: #92400e !important; } /* Step numbers */ [data-theme="light"] .step-num { background: #f59e0b !important; color: #fff7ed !important; } /* Expand button */ [data-theme="light"] .expand-btn { color: #c07000 !important; } /* Asig tabs */ [data-theme="light"] .asig-tab { background: #ffffff !important; border-color: #e5d5c0 !important; color: #7c5a46 !important; } [data-theme="light"] .asig-tab.active, [data-theme="light"] .asig-tab:hover { background: rgba(245,158,11,0.12) !important; border-color: #c07000 !important; color: #c07000 !important; } /* Progress bar */ [data-theme="light"] .progress-bar { background: rgba(245,158,11,0.18) !important; } /* Hero title y subtítulo */ [data-theme="light"] .aula-hero-title { color: #92400e !important; } [data-theme="light"] .aula-hero-sub { color: #7c5a46 !important; } /* Utility classes — títulos, descripciones, accent */ [data-theme="light"] .aula-item-title { color: #78350f !important; } [data-theme="light"] .aula-item-desc { color: #6b4226 !important; } [data-theme="light"] .aula-accent-label { color: #c07000 !important; } [data-theme="light"] .aula-section-intro { color: #7c5a46 !important; } /* Inline styles residuales dentro del cuerpo del Aula — anulados con !important */ [data-theme="light"] .aula-body [style*="color:#fcd34d"] { color: #78350f !important; } [data-theme="light"] .aula-body [style*="color:#f59e0b"] { color: #c07000 !important; } [data-theme="light"] .aula-body [style*="color:#c09070"] { color: #7c5a46 !important; } [data-theme="light"] .aula-body [style*="color:#a0806a"] { color: #6b4226 !important; } [data-theme="light"] .aula-body [style*="color:#9a9060"] { color: #5a5030 !important; } [data-theme="light"] .aula-body [style*="color:#6a8090"] { color: #4a6070 !important; } [data-theme="light"] .aula-body [style*="color:#a5b4fc"] { color: #3730a3 !important; } [data-theme="light"] .aula-body [style*="color:#10b981"] { color: #065f46 !important; } /* Textos blancos dentro del hero en modo claro */ [data-theme="light"] .aula-hero .text-white, [data-theme="light"] .aula-hero [style*="color:#f5e6d3"] { color: #1c0a00 !important; } [data-theme="light"] .aula-hero .text-white\/80, [data-theme="light"] .aula-hero .text-amber-300 { color: #78350f !important; } [data-theme="light"] .aula-hero .text-amber-200 { color: #92400e !important; } /* Iconos de dinámica */ [data-theme="light"] .dinamica-icon { background: rgba(245,158,11,0.12) !important; } /* Badge de estado */ [data-theme="light"] .badge-amber { background: rgba(245,158,11,0.15) !important; color: #92400e !important; } [data-theme="light"] .badge-red { background: rgba(239,68,68,0.12) !important; color: #b91c1c !important; } [data-theme="light"] .badge-green { background: rgba(16,185,129,0.12) !important; color: #065f46 !important; } [data-theme="light"] .badge-blue { background: rgba(59,130,246,0.12) !important; color: #1e40af !important; } [data-theme="light"] .badge-purple { background: rgba(139,92,246,0.12) !important; color: #5b21b6 !important; } [data-theme="light"] .badge-rose { background: rgba(244,63,94,0.12) !important; color: #9f1239 !important; } [data-theme="light"] .badge-teal { background: rgba(20,184,166,0.12) !important; color: #0f766e !important; } /* ════════════════════════════════════════════════════ RGA CURSO DETALLE — DARK MODE COMPLETO Sobrescribe colores hardcodeados de la hoja inline del archivo curso_detalle.php ════════════════════════════════════════════════════ */ /* ── Fondo principal de la página ── */ [data-theme="dark"] .rga-curso-detalle { background: #0d1424 !important; color: #e2e8f0 !important; } /* ── Contenido principal (lado derecho) ── */ [data-theme="dark"] .rga-curso-detalle main > .grid > div:first-child, [data-theme="dark"] .rga-curso-detalle main > .max-w-7xl > .grid > .lg\:col-span-3 { background: transparent !important; } /* ── Panel de secciones (bg-white contenedor) ── */ [data-theme="dark"] .rga-curso-detalle .bg-white.rounded-2xl, [data-theme="dark"] .rga-curso-detalle .bg-white.rounded-xl, [data-theme="dark"] .rga-curso-detalle .bg-white.shadow { background: #1e293b !important; border-color: #334155 !important; } /* ── Cabecera de sección (degradado inline de color del curso) ── */ [data-theme="dark"] .rga-curso-detalle .p-5.border-b { background: rgba(30,41,59,0.95) !important; } [data-theme="dark"] .rga-curso-detalle .px-4.py-3.border-b { background: rgba(30,41,59,0.9) !important; } /* ── Filas de recursos ── */ [data-theme="dark"] .recurso-row { background: #1e293b !important; border-bottom-color: #334155 !important; } [data-theme="dark"] .recurso-row:hover { background: #263548 !important; } [data-theme="dark"] .recurso-row .text-gray-800, [data-theme="dark"] .recurso-row .font-semibold { color: #f1f5f9 !important; } [data-theme="dark"] .recurso-row .text-gray-500, [data-theme="dark"] .recurso-row .text-sm.text-gray-500 { color: #94a3b8 !important; } [data-theme="dark"] .recurso-row .text-gray-400 { color: #64748b !important; } /* ── Playlist row ── */ [data-theme="dark"] .playlist-row { background: #1e293b !important; } [data-theme="dark"] .playlist-row:hover { background: #263548 !important; } [data-theme="dark"] .recursos-hijos { background: #172033 !important; border-left: 2px solid #334155; } /* ── TOC (índice lateral) ── */ [data-theme="dark"] .rga-toc-item { color: #94a3b8 !important; } [data-theme="dark"] .rga-toc-item:hover { background: #263548 !important; color: #e2e8f0 !important; } [data-theme="dark"] .rga-toc-item.rga-toc-active { background: rgba(99,102,241,0.18) !important; color: #a5b4fc !important; border-left-color: #6366f1 !important; } /* Widget TOC contenedor ── */ [data-theme="dark"] #rga-toc-widget { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] #rga-toc-widget .text-gray-800, [data-theme="dark"] #rga-toc-widget .font-semibold { color: #f1f5f9 !important; } [data-theme="dark"] #rga-toc-widget .text-gray-500 { color: #94a3b8 !important; } /* ── Toolbar del editor de bloques ── */ [data-theme="dark"] .rga-tb-btn { color: #cbd5e1 !important; background: transparent !important; } [data-theme="dark"] .rga-tb-btn:hover { background: #334155 !important; border-color: #475569 !important; } [data-theme="dark"] .rga-tb-sep { background: #334155 !important; } /* ── Editor de bloques (área editable) ── */ [data-theme="dark"] .rga-editor-content { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; } [data-theme="dark"] .rga-editor-content h2 { color: #f1f5f9 !important; } [data-theme="dark"] .rga-editor-content h3 { color: #e2e8f0 !important; } [data-theme="dark"] .rga-editor-content a { color: #93c5fd !important; } /* ── Descripción de sección (HTML renderizado) ── */ [data-theme="dark"] .rga-desc-seccion h2 { color: #f1f5f9 !important; } [data-theme="dark"] .rga-desc-seccion h3 { color: #e2e8f0 !important; } [data-theme="dark"] .rga-desc-seccion p { color: #cbd5e1 !important; } [data-theme="dark"] .rga-desc-seccion a { color: #93c5fd !important; } /* ── Bloque de texto incrustado ── */ [data-theme="dark"] .rga-bloque-row { color: #cbd5e1 !important; } [data-theme="dark"] .rga-bloque-row h2 { color: #f1f5f9 !important; } [data-theme="dark"] .rga-bloque-row h3 { color: #e2e8f0 !important; } [data-theme="dark"] .rga-bloque-row p { color: #cbd5e1 !important; } [data-theme="dark"] .rga-bloque-row a { color: #38bdf8 !important; } [data-theme="dark"] .rga-bloque-edit-bar { background: rgba(15,23,42,0.6) !important; border-color: #334155 !important; } [data-theme="dark"] .rga-bloque-btn { background: #1e3a4c !important; color: #7dd3fc !important; } [data-theme="dark"] .rga-bloque-btn:hover { background: #164e63 !important; } [data-theme="dark"] .rga-bloque-btn-del { background: #450a0a !important; color: #fca5a5 !important; } [data-theme="dark"] .rga-bloque-btn-del:hover { background: #7f1d1d !important; } /* ── Diapositivas (contenido estático renderizado) ── */ [data-theme="dark"] .diapositiva-contenido h1, [data-theme="dark"] .diapositiva-pasos h1 { color: #f1f5f9 !important; } [data-theme="dark"] .diapositiva-contenido h2, [data-theme="dark"] .diapositiva-pasos h2 { color: #e2e8f0 !important; } [data-theme="dark"] .diapositiva-contenido h3, [data-theme="dark"] .diapositiva-pasos h3 { color: #cbd5e1 !important; } [data-theme="dark"] .diapositiva-contenido p, [data-theme="dark"] .diapositiva-pasos p { color: #94a3b8 !important; } [data-theme="dark"] .diapositiva-contenido blockquote, [data-theme="dark"] .diapositiva-pasos blockquote { background: #1e293b !important; border-left-color: #475569 !important; color: #94a3b8 !important; border-radius: 0.75rem; } [data-theme="dark"] .diapositiva-contenido th { background: #1e293b !important; color: #f1f5f9 !important; } [data-theme="dark"] .diapositiva-contenido td { color: #cbd5e1 !important; border-color: #334155 !important; } [data-theme="dark"] .diapositiva-contenido th { border-color: #334155 !important; } [data-theme="dark"] .diapositiva-contenido code { background: #334155 !important; color: #a5b4fc !important; } /* ── Badges de recurso (tipo pdf, video, enlace…) ── */ [data-theme="dark"] .rga-curso-detalle .bg-blue-50 { background-color: rgba(30,58,95,0.4) !important; } [data-theme="dark"] .rga-curso-detalle .text-blue-700, [data-theme="dark"] .rga-curso-detalle .text-blue-600 { color: #93c5fd !important; } [data-theme="dark"] .rga-curso-detalle .border-blue-200 { border-color: rgba(96,165,250,0.3) !important; } [data-theme="dark"] .rga-curso-detalle .bg-emerald-50, [data-theme="dark"] .rga-curso-detalle .bg-green-50 { background-color: rgba(20,83,45,0.3) !important; } [data-theme="dark"] .rga-curso-detalle .text-emerald-700, [data-theme="dark"] .rga-curso-detalle .text-green-700 { color: #6ee7b7 !important; } [data-theme="dark"] .rga-curso-detalle .bg-violet-50, [data-theme="dark"] .rga-curso-detalle .bg-purple-50 { background-color: rgba(67,56,110,0.3) !important; } [data-theme="dark"] .rga-curso-detalle .text-violet-700, [data-theme="dark"] .rga-curso-detalle .text-purple-700 { color: #c4b5fd !important; } [data-theme="dark"] .rga-curso-detalle .border-violet-200, [data-theme="dark"] .rga-curso-detalle .border-purple-200 { border-color: rgba(139,92,246,0.3) !important; } [data-theme="dark"] .rga-curso-detalle .bg-amber-50, [data-theme="dark"] .rga-curso-detalle .bg-yellow-50 { background-color: rgba(120,53,15,0.25) !important; } [data-theme="dark"] .rga-curso-detalle .text-amber-700, [data-theme="dark"] .rga-curso-detalle .text-yellow-700 { color: #fcd34d !important; } /* ── Pestañas de navegación del curso (vista alumno) ── */ [data-theme="dark"] .tab-btn { color: #94a3b8 !important; border-bottom-color: transparent !important; } [data-theme="dark"] .tab-btn:hover { color: #e2e8f0 !important; background: rgba(51,65,85,0.5) !important; } [data-theme="dark"] .tab-btn.active, [data-theme="dark"] .tab-btn[aria-selected="true"] { color: #a5b4fc !important; border-bottom-color: #6366f1 !important; background: rgba(99,102,241,0.12) !important; } /* ── Badge "Nuevo" ── */ [data-theme="dark"] .rga-badge-nuevo { background: linear-gradient(135deg, rgba(16,185,129,0.25), rgba(5,150,105,0.25)) !important; color: #6ee7b7 !important; border-color: rgba(52,211,153,0.35) !important; } /* ── Ajustes sidebar derecho (TOC widget container) ── */ [data-theme="dark"] .lg\:col-span-1 .bg-white, [data-theme="dark"] .lg\:col-span-1 > .sticky > .bg-white { background: #1e293b !important; border-color: #334155 !important; } /* ── Spinner de carga ── */ [data-theme="dark"] .rga-curso-detalle [class*="animate-spin"] { border-top-color: #60a5fa !important; } /* ── Separadores ── */ [data-theme="dark"] .rga-curso-detalle hr, [data-theme="dark"] .rga-curso-detalle .border-b, [data-theme="dark"] .rga-curso-detalle .border-t { border-color: #334155 !important; } /* ════════════════════════════════════════════════════ RGA NAV — MATERIAS DROPDOWN & MENÚ MÓVIL (DARK MODE) ════════════════════════════════════════════════════ */ /* Menú móvil: bg-white/95 no estaba cubierto */ [data-theme="dark"] .bg-white\/95 { background-color: rgba(15, 23, 42, 0.97) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] .bg-white\/95 * { border-color: var(--dm-border) !important; } /* Dropdown Materias y Practicar: texto de los links sin color explícito */ [data-theme="dark"] .nav-glass .bg-white a, [data-theme="dark"] .bg-white.rounded-xl.shadow-2xl a { color: var(--dm-text-primary) !important; } /* Etiquetas de grupo (text-sky-600, emerald, teal, rose) — más brillantes en dark */ [data-theme="dark"] .text-sky-600 { color: #38bdf8 !important; } [data-theme="dark"] .text-emerald-600 { color: #34d399 !important; } [data-theme="dark"] .text-teal-600 { color: #2dd4bf !important; } [data-theme="dark"] .text-rose-600 { color: #fb7185 !important; } /* Hover states que faltaban en el dropdown de Materias */ [data-theme="dark"] .hover\:bg-teal-50:hover { background-color: rgba(20, 184, 166, 0.12) !important; } [data-theme="dark"] .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, 0.12) !important; } [data-theme="dark"] .hover\:bg-indigo-50:hover { background-color: rgba(99, 102, 241, 0.12) !important; } [data-theme="dark"] .hover\:bg-amber-50:hover { background-color: rgba(251, 191, 36, 0.10) !important; } /* Líneas separadoras en menú móvil */ [data-theme="dark"] .bg-white\/95 .border-t { border-top-color: var(--dm-border) !important; } /* ════════════════════════════════════════════════════ EXPLORAR — DARK MODE ════════════════════════════════════════════════════ */ /* Badge "Mapa RGA" (bg-sky-100 global) */ [data-theme="dark"] .bg-sky-100 { background-color: rgba(14, 116, 170, 0.30) !important; color: #7dd3fc !important; } [data-theme="dark"] .text-sky-700 { color: #38bdf8 !important; } /* Icono de grupo en explorar */ [data-theme="dark"] .bg-gray-100.rounded-xl { background-color: var(--dm-bg-card-hover) !important; color: var(--dm-text-muted) !important; } /* Tarjetas de sección en explorar */ [data-theme="dark"] a.bg-white.border.border-gray-100, [data-theme="dark"] a.bg-white.border.border-gray-100:hover { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } [data-theme="dark"] a.bg-white.border.border-gray-100:hover { background-color: var(--dm-bg-card-hover) !important; border-color: #38bdf8 !important; } [data-theme="dark"] a.bg-white.border.border-gray-100 h3 { color: var(--dm-text-primary) !important; } [data-theme="dark"] a.bg-white.border.border-gray-100 p { color: var(--dm-text-muted) !important; } [data-theme="dark"] .group-hover\:text-sky-600:hover { color: #38bdf8 !important; } /* kbd en dark */ [data-theme="dark"] kbd { background-color: var(--dm-bg-card-hover) !important; color: var(--dm-text-muted) !important; border-color: var(--dm-border) !important; } /* Callouts tintados: en claro se funden; en oscuro se ven como bloques */ [data-theme="dark"] :where(.bg-blue-50, .bg-sky-50, .bg-indigo-50, .bg-cyan-50):not([class*="rounded"]):not(tr):not(td):not(th) { border-radius: 0.75rem; }