/* ========================================================================== dark.css — Modo oscuro (L6): toggle + overrides por selector. Estrategia (ver comentario del bloque `[data-theme="dark"]` en tokens.css): - Los TOKENS se invierten en tokens.css (rampa stone, crema, arena, tinta, dorado, color-scheme). Eso cubre la mayoría del sitio, que ya consume var(--...). - ESTE archivo cubre lo que NO pasa por token: los colores hardcodeados (hex/rgba/`white`) y los usos ambiguos del azul de marca como TEXTO o como BORDE sobre superficies que ahora son oscuras. También estilos del botón de alternancia. Reglas de oro al tocar esto: - NUNCA redefinir --color-white ni --color-primary*: son fondo de botones y texto claro ya verificado (WCAG). Los textos que "eran" del azul de marca sobre fondo claro usan --color-primary-text (azul más claro). - Los chips semánticos claros (success/danger/warning, avisos ámbar/verde) se DEJAN claros: son cajas de resultado con contraste verificado. Solo se re-afirma su texto oscuro cuando la rampa stone lo hubiera aclarado. - Este archivo debe enlazarse ÚLTIMO en todas las páginas (después de la hoja de la página) para ganar la cascada. El tema lo aplica js/dark-mode.js poniendo `data-theme="dark"` en . ========================================================================== */ /* ========================================================================== 1. BOTÓN DE ALTERNANCIA (visible en ambos temas; lo inserta dark-mode.js) ========================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--color-stone-300); border-radius: 999px; background: var(--color-white); color: var(--color-stone-700); cursor: pointer; flex: 0 0 auto; font-family: inherit; line-height: 0; } .theme-toggle:hover { background: var(--color-stone-50); color: var(--color-stone-800); } .theme-toggle:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .theme-icon { width: 20px; height: 20px; display: block; } /* En claro se ve la luna (qué vas a activar); en oscuro el sol. */ .theme-icon-sun { display: none; } [data-theme="dark"] .theme-icon-sun { display: block; } [data-theme="dark"] .theme-icon-moon { display: none; } /* Sobre barras navy (course-nav de pages/, admin-header de los paneles): el botón claro de la base no pega, se usa un botón translúcido blanco. */ .course-nav .theme-toggle, .admin-header .theme-toggle { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); color: var(--color-white); } .course-nav .theme-toggle:hover, .admin-header .theme-toggle:hover { background: rgba(255, 255, 255, 0.18); color: var(--color-white); } /* En oscuro el header sticky de index.html también es navy translúcido: el botón claro de la base pasaría a un disco blanco brillante. Se usa el mismo tratamiento translúcido que sobre las barras navy. */ [data-theme="dark"] .theme-toggle { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); color: var(--color-white); } [data-theme="dark"] .theme-toggle:hover { background: rgba(255, 255, 255, 0.18); color: var(--color-white); } /* ========================================================================== 2. MODIFICACIONES DE TEMA — solo aplican con data-theme="dark" ========================================================================== */ /* ---------- Fondos de página y header sticky (index) ---------- */ [data-theme="dark"] body { background-color: var(--color-stone-50); } /* El header sticky de index.html pintaba blanco translúcido con blur. */ [data-theme="dark"] header { background: rgba(27, 25, 23, 0.86); } /* ---------- Superficies que pintaban blanco/var(--color-white) ---------- El token --color-white se mantiene (es texto sobre botones), así que las cartas e inputs que lo usaban de fondo se migran a --color-surface. */ [data-theme="dark"] .btn, [data-theme="dark"] .btn-secondary, [data-theme="dark"] .btn-admin, [data-theme="dark"] .user-dropdown-btn, [data-theme="dark"] .user-dropdown-menu, [data-theme="dark"] .section-about, [data-theme="dark"] .team-nav, [data-theme="dark"] .section-testimonials, [data-theme="dark"] .testimonial-card, [data-theme="dark"] .search-input, [data-theme="dark"] .category-btn, [data-theme="dark"] .course-card, [data-theme="dark"] .pagination-btn, [data-theme="dark"] .contact-item, [data-theme="dark"] .contact-form, [data-theme="dark"] .form-input, [data-theme="dark"] .form-textarea, [data-theme="dark"] .modal-content, [data-theme="dark"] .mission-content, [data-theme="dark"] .vision-content { background: var(--color-surface); } /* ---------- index.html: textos y bordes del azul de marca ---------- Los selectores agrupados son los que usan --color-primary(-dark) como TEXTO o BORDE sobre superficies que ahora son oscuras. Los que lo usaban sobre chips amarillos o el hero (contraste ya correcto) NO van acá. */ [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active, [data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .dropdown-option:hover, [data-theme="dark"] .section-title, [data-theme="dark"] .about-text h1, [data-theme="dark"] .highlight-primary, [data-theme="dark"] .vision-emoji, [data-theme="dark"] .pagination-btn, [data-theme="dark"] .course-card:hover .course-title, [data-theme="dark"] .course-price, [data-theme="dark"] .btn-course-details, [data-theme="dark"] .modal-switch a, [data-theme="dark"] .btn-large-secondary:hover, [data-theme="dark"] .team-nav { color: var(--color-primary-text); } [data-theme="dark"] .btn-secondary:hover, [data-theme="dark"] .search-input:focus, [data-theme="dark"] .pagination-btn, [data-theme="dark"] .btn-course-details, [data-theme="dark"] .contact-item:hover, [data-theme="dark"] .form-input:focus, [data-theme="dark"] .form-textarea:focus { border-color: var(--color-primary-text); } /* Textos secundarios hardcodeados que caían sobre superficies claras. */ [data-theme="dark"] .section-description, [data-theme="dark"] .about-text p, [data-theme="dark"] .mission-text { color: var(--color-stone-600); } [data-theme="dark"] .mission-emoji { color: var(--color-green); } /* El logout en el dropdown: rojo un punto más claro para el fondo oscuro. */ [data-theme="dark"] .dropdown-option.logout-option { color: #f87171; } /* ---------- Secciones que NO se oscurecen del todo (marca) ---------- */ /* El fondo amarillo institucional (.section-vision) se queda amarillo; solo la tarjeta blanca interna (.vision-content) pasa a oscura, y su texto deja de ser el #43535f verificado para amarillo y usa el gris claro del tema. */ [data-theme="dark"] .vision-text, [data-theme="dark"] .mission-text { color: var(--color-stone-600); } /* ---------- curso.css (portada del curso / aula) ---------- */ [data-theme="dark"] .cta-button.secondary, [data-theme="dark"] .card.plain, [data-theme="dark"] .course-options-menu, [data-theme="dark"] .app-modal-box { background: var(--color-surface); } [data-theme="dark"] .restricted-banner p, [data-theme="dark"] .cta-button.secondary, [data-theme="dark"] .card h3, [data-theme="dark"] .price-tag .amount, [data-theme="dark"] .progress-label, [data-theme="dark"] .review-author, [data-theme="dark"] .app-modal-header h2, [data-theme="dark"] .ruta-rail-link { color: var(--color-primary-text); } /* ---------- curso-overview.css (rediseño "Ruta", 14-08-2026) ---------- Esta sección no existía: el rediseño llegó después que el modo oscuro, así que ninguna de sus clases (.ruta-*) tenía cobertura — la portada se quedaba blanca entera mientras el texto sí invertía color, dando gris claro y azul claro sobre blanco. Auditado con un medidor de contraste real (WCAG 1.4.3) contra la página cargada, no a ojo. Dos familias de arreglo: 1. SUPERFICIES var(--color-white): igual que en el resto del archivo, pasan a var(--color-surface). #view-overview es el lienzo de toda la vista (equivalente a ), así que va al mismo tono que el body (--color-stone-50) y no a --color-surface: si usara el mismo tono que las tarjetas de encima, tarjeta y lienzo se fundirían en un solo plano sin relieve. 2. FONDOS var(--tinta) fijos: --tinta es el color de TEXTO de la paleta editorial y se invierte a propósito (queda claro sobre fondo oscuro). Once componentes lo usaban además como fondo sólido de un chip/botón navy con texto blanco fijo — al invertirse, quedaban blanco-sobre-blanco. Se fijan a var(--color-primary-dark), que es el token que SÍ existe para esto (nunca se invierte, ya verificado en botones de todo el sitio). */ [data-theme="dark"] #view-overview { background: var(--color-stone-50); } [data-theme="dark"] .ruta-card, [data-theme="dark"] .ruta-item-card { background: var(--color-surface); } [data-theme="dark"] .ruta-hero, [data-theme="dark"] .ruta-card .cta-button, [data-theme="dark"] .ruta-card .cta-button.success, [data-theme="dark"] .ruta-item.is-current .ruta-marker, [data-theme="dark"] .ruta-item.is-current .ruta-item-card, [data-theme="dark"] .faq-button, [data-theme="dark"] .faq-panel { background: var(--color-primary-dark); } /* ---------- curso-aula.css ---------- */ [data-theme="dark"] .aula-sidebar, [data-theme="dark"] .aula-search input, [data-theme="dark"] .aula-content-box, [data-theme="dark"] .aula-material, [data-theme="dark"] .aula-resources, [data-theme="dark"] .aula-activities, [data-theme="dark"] .lesson-nav-btn, [data-theme="dark"] .aula-layout, [data-theme="dark"] .aula-progress, [data-theme="dark"] .aula-rail, [data-theme="dark"] .aula-activity, [data-theme="dark"] .aula-activity-check, [data-theme="dark"] .aula-lesson-item:hover, [data-theme="dark"] .aula-lesson-item.active, [data-theme="dark"] .aula-lesson-substeps, [data-theme="dark"] .aula-forum-card, [data-theme="dark"] .thread-reply-card, [data-theme="dark"] .thread-main-post, [data-theme="dark"] .aula-submission-box { background: var(--color-surface); } /* .aula-layout es el lienzo de las tres columnas de la lección (equivalente a #view-overview de la portada): al mismo tono que el body, no al de tarjeta, por la misma razón — si no, el sidebar y el panel de material (que sí usan --color-surface) perderían el relieve contra su propio contenedor. */ [data-theme="dark"] .aula-layout { background: var(--color-stone-50); } /* Hover de colapso del sidebar: el blanco translúcido era para el crema claro; sobre el crema oscuro se usa un velo oscuro. */ [data-theme="dark"] .aula-collapse-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-primary-text); } [data-theme="dark"] .aula-progress-label, [data-theme="dark"] .aula-lesson-item.active, [data-theme="dark"] .aula-lesson-header h1, [data-theme="dark"] .aula-content-box h4, [data-theme="dark"] .aula-readonly-banner, [data-theme="dark"] .aula-material-label, [data-theme="dark"] .aula-next-title, [data-theme="dark"] .lesson-nav-btn, [data-theme="dark"] .aula-resources h4, [data-theme="dark"] .aula-activities h4, [data-theme="dark"] .aula-resource-label, [data-theme="dark"] .aula-activity-title, [data-theme="dark"] .aula-forum-section h4, [data-theme="dark"] .aula-forum-card-title, [data-theme="dark"] .btn-new-discussion { color: var(--color-primary-text); } [data-theme="dark"] .btn-new-discussion:hover { border-color: var(--color-primary-text); } /* .thread-main-post h3 se pinta con estilo en línea desde openThreadModal() (js/curso-view-aula.js): un `style="color: ..."` gana incluso a un selector más específico, así que hace falta !important. Es el único lugar del archivo que lo necesita — el resto del título del hilo (fecha, cuerpo, respuestas) ya usa var(--color-stone-*) en línea, que SÍ seguía invirtiendo bien porque el valor de la variable se resuelve en el navegador, no al escribir el HTML; solo --color-primary-dark no se invierte a propósito y por eso necesitaba este empujón. */ [data-theme="dark"] .thread-main-post h3 { color: var(--color-primary-text) !important; } [data-theme="dark"] .aula-lesson-item.active, [data-theme="dark"] .lesson-nav-btn { border-left-color: var(--color-primary-text); border-color: var(--color-primary-text); } /* Botones/marcadores que usaban --tinta como fondo sólido navy con texto blanco fijo: mismo arreglo que en curso-overview.css (ver el comentario de arriba) — se fijan a --color-primary-dark en vez de dejar que --tinta se invierta debajo suyo. */ [data-theme="dark"] .aula-lesson-item.active .aula-lesson-marker, [data-theme="dark"] .aula-readonly-banner button, [data-theme="dark"] .btn-submit-sub, [data-theme="dark"] .aula-next-cta { background: var(--color-primary-dark); } [data-theme="dark"] .aula-next-cta:hover { background: var(--azul-medio); } /* "Siguiente lección" (aviso verde): se vuelve un verde oscuro con texto claro, en vez del #f0fdf4 claro. */ [data-theme="dark"] .next-nudge { background: #1a2f21; color: #86d9a5; } /* El chip "obligatoria" era --color-cream + --dorado — un par que en claro funciona (crema claro + dorado oscuro) pero que en oscuro se invierte ENTERO (crema pasa a fondo oscuro, dorado pasa a texto claro) y deja de leerse como advertencia. Se fija a los tokens semánticos de advertencia, que nunca se invierten y son la pareja correcta para un chip de este tipo en cualquier tema. */ [data-theme="dark"] .aula-activity-required { background: var(--color-warning-bg); color: var(--color-warning-text); } /* La actividad completada mantiene su chip verde claro → título verde oscuro. */ [data-theme="dark"] .is-done .aula-activity-title { color: var(--color-green-dark); } /* El botón "Marcar como completada" ya resuelto (chip verde claro) se volvía blanco sólido al pasar el mouse; se queda en su propio verde claro. */ [data-theme="dark"] .btn-complete.completed:hover { background: var(--color-success-bg); } /* ---------- Foro (curso-aula.css) ---------- Construidas antes de que este archivo cubriera la vista de curso. Solo el avatar necesita algo: es la única superficie sin pareja bg/texto que se invierta junta sola (evita un cuadro blanco mientras carga la foto). Los chips de estado de la entrega (.aula-sub-badge.status-*) y el aviso de retroalimentación (.aula-sub-feedback) no están acá a propósito: ya usan tokens *-bg/*-text que nunca se invierten, o la rampa stone completa (fondo Y texto), así que ya se leen bien en oscuro sin tocar nada. */ [data-theme="dark"] .aula-forum-avatar { background: var(--color-stone-200); } /* ---------- mis_cursos.css ---------- */ [data-theme="dark"] .tabs, [data-theme="dark"] .tab-btn, [data-theme="dark"] .course-card, [data-theme="dark"] .empty-state, [data-theme="dark"] .skeleton-card { background: var(--color-surface); } [data-theme="dark"] .tab-btn, [data-theme="dark"] .course-title, [data-theme="dark"] .badge, [data-theme="dark"] .empty-state h2 { color: var(--color-primary-text); } [data-theme="dark"] .tab-btn { border-color: var(--color-primary-text); } [data-theme="dark"] .tab-btn.active { color: var(--color-white); border-color: var(--color-primary-dark); } /* Botón secundario ("Detalles"/"Editar"): era blanco con texto/borde navy; en oscuro pasa a azul sólido con texto blanco (regla "fondo de color + texto blanco"). */ [data-theme="dark"] .btn-secondary { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); } [data-theme="dark"] .btn-secondary:hover { background: var(--color-primary-dark); color: var(--color-white); border-color: var(--color-primary-dark); } /* "Continuar/Revisar" ya es navy con texto blanco; sobre la tarjeta oscura el navy se funde con el fondo, así que se le marca un anillo azul medio. */ [data-theme="dark"] .btn-primary { box-shadow: 0 0 0 1.5px var(--color-primary-mid), 0 4px 15px rgba(0, 0, 0, 0.35); } /* La insignia "Completado" es un chip verde claro: su texto verde oscuro se re-afirma (la regla .badge de arriba lo había aclarado de más). */ [data-theme="dark"] .badge.completed { color: var(--color-green-dark); } [data-theme="dark"] .badge-warn { color: #7c2d12; } /* ---------- pagina-estado.css ---------- */ [data-theme="dark"] .status-card, [data-theme="dark"] .verify-card, [data-theme="dark"] .prose-card, [data-theme="dark"] .result-detail, [data-theme="dark"] .btn-action.secondary { background: var(--color-surface); } [data-theme="dark"] .btn-action.secondary, [data-theme="dark"] .btn-action.secondary:hover, [data-theme="dark"] .status-card.loading .status-icon, [data-theme="dark"] .legal-note a, [data-theme="dark"] .prose-card h2, [data-theme="dark"] .prose-card a { color: var(--color-primary-text); } /* ---------- recovery_password.css ---------- */ [data-theme="dark"] .code-input { background: var(--color-surface); } /* ---------- toast.css ---------- */ [data-theme="dark"] .toast { background: var(--color-surface); } [data-theme="dark"] .toast-close:hover { background: rgba(255, 255, 255, 0.14); } /* ---------- creation_Course.css (paneles admin/instructor/perfil) ---------- */ [data-theme="dark"] .sidebar-nav, [data-theme="dark"] .main-config, [data-theme="dark"] .form-input, [data-theme="dark"] .form-textarea, [data-theme="dark"] .form-select, [data-theme="dark"] .tag-input, [data-theme="dark"] .items-input, [data-theme="dark"] .module-title-input, [data-theme="dark"] .icon-btn:hover { background: var(--color-surface); } /* Las alertas de guardado (verde/ámbar/rojo claras) se quedan claras: son chips semánticos con texto oscuro verificado (igual que toasts y badges). */ /* ---------- Paneles: superficies blancas de los