/* ============================================ EDUPROFE - MODO OSCURO GLOBAL Se activa con [data-theme="dark"] en Detecta automáticamente prefers-color-scheme ============================================ */ /* --- 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 --- */ [data-theme="dark"] input, [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: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; } /* --- 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; } [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; } [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 Alumno/Padre --- */ [data-theme="dark"] header { background: linear-gradient(135deg, rgba(14, 116, 170, 0.95) 0%, rgba(7, 89, 133, 0.95) 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; } /* --- 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), movemos el botón a la esquina superior izquierda. */ body.has-support-widget .dark-mode-toggle { top: 84px; bottom: auto; left: 16px; } /* --- 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 .dark-mode-toggle { top: 72px; bottom: auto; left: 12px; } }