/* ============================================================ * justifica-dark.css — Modo oscuro del módulo justifica. * Se carga DESPUÉS de theme.js (que inyecta theme.css). theme.js * fija data-theme/data-fontsize en . El tamaño de texto lo * resuelve theme.css (zoom); aquí va solo el color del modo oscuro. * Paleta alineada con frontend/assets/css/theme.css. * ============================================================ */ /* --- 1. Token-flip: voltea index/área/componentes que usan var() --- */ :root[data-theme="dark"] { --color-page-bg: #0d1620; --color-text: #e8eef7; --color-text-soft: #a6b4c8; --color-white: #1d2c3e; /* las cards que usan var(--color-white) */ --color-shadow: rgba(0,0,0,0.5); /* Acentos por área: el ACCENT se conserva (marca); LIGHT pasa a tinte oscuro y TEXT a claro para legibilidad sobre superficies oscuras. */ --mat-light: #14283c; --mat-text: #cfe0f2; --lc-light: #271b3d; --lc-text: #d8caf2; --cn-light: #123524; --cn-text: #bfe9cf; --cc-light: #3a2c10; --cc-text: #f3d79a; --ing-light: #3a1714; --ing-text: #f4c0bc; } /* --- 2. Base de página (por si alguna usa fondo propio) --- */ :root[data-theme="dark"] body { background-color: #0d1620; color: #e8eef7; } /* --- 3. Utilidades Tailwind (justification/crud). Ganan por especificidad 0,2,0 sobre la utilidad 0,1,0. --- */ :root[data-theme="dark"] .bg-white { background-color: #1d2c3e !important; } :root[data-theme="dark"] .bg-gray-50 { background-color: #172433 !important; } :root[data-theme="dark"] .bg-gray-100 { background-color: #1d2c3e !important; } :root[data-theme="dark"] .bg-gray-200, :root[data-theme="dark"] .bg-gray-300 { background-color: #243549 !important; } :root[data-theme="dark"] .text-gray-900, :root[data-theme="dark"] .text-gray-800, :root[data-theme="dark"] .text-gray-700, :root[data-theme="dark"] .text-slate-900, :root[data-theme="dark"] .text-slate-800, :root[data-theme="dark"] .text-slate-700 { color: #e8eef7 !important; } :root[data-theme="dark"] .text-gray-600, :root[data-theme="dark"] .text-gray-500, :root[data-theme="dark"] .text-gray-400, :root[data-theme="dark"] .text-slate-600, :root[data-theme="dark"] .text-slate-500 { color: #a6b4c8 !important; } :root[data-theme="dark"] .border-slate-100, :root[data-theme="dark"] .border-slate-200, :root[data-theme="dark"] .border-gray-100, :root[data-theme="dark"] .border-gray-200, :root[data-theme="dark"] .border-gray-300 { border-color: rgba(232,238,247,0.14) !important; } :root[data-theme="dark"] .bg-red-50 { background-color: #3a1714 !important; } :root[data-theme="dark"] .bg-green-50 { background-color: #15432a !important; } :root[data-theme="dark"] .bg-blue-50 { background-color: #16334e !important; } :root[data-theme="dark"] .bg-red-50 .text-red-700, :root[data-theme="dark"] .text-red-700 { color: #ffb4ab !important; } :root[data-theme="dark"] .text-green-700 { color: #7fe0a4 !important; } :root[data-theme="dark"] .text-blue-700 { color: #cfe6ff !important; } /* Tarjetas con sombra Tailwind: suaviza el halo en dark */ :root[data-theme="dark"] .shadow-sm, :root[data-theme="dark"] .shadow, :root[data-theme="dark"] .shadow-md { box-shadow: 0 1px 3px rgba(0,0,0,0.5) !important; } /* ============================================================ * 4. Vista de justificación (pages/css/justification.css) * ============================================================ */ :root[data-theme="dark"] .question-section { background-color: #1d2c3e; } :root[data-theme="dark"] .prose td, :root[data-theme="dark"] .prose th { border-color: rgba(232,238,247,0.14); } /* Navegación rápida */ :root[data-theme="dark"] .quick-nav-pill:hover { background-color: #243549; } :root[data-theme="dark"] .quick-nav-pill.active { background-color: #5aa6ec; color: #04121f; } /* .quick-nav-tooltip (#1f2937) ya es oscuro: se deja sin override */ /* Opciones de respuesta (clases reales del render: .answer-option / .learning-prose) */ :root[data-theme="dark"] .answer-option { background: #1d2c3e; border-color: rgba(232,238,247,0.14); } :root[data-theme="dark"] .answer-option--correct { background: #15432a; border-color: #2e6b4a; } :root[data-theme="dark"] .answer-option--wrong { background: #3a1714; border-color: #5b2b27; } :root[data-theme="dark"] .answer-letter { background: #243549; color: #cdd9e8; } :root[data-theme="dark"] .answer-option--wrong .answer-letter { background: #5b1512; color: #ffb4ab; } /* .answer-option--correct .answer-letter (#16a34a + blanco) se conserva */ /* Ficha técnica: ya es oscura (#1f2937); se alinea levemente */ :root[data-theme="dark"] .tech-spec { background-color: #172433; } /* Caja "concepto clave": gradiente claro → oscuro */ :root[data-theme="dark"] .concept-key { background: linear-gradient(to bottom right, #16334e, #1d2c3e); border-color: rgba(232,238,247,0.14); } /* Scrollbars internos */ :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a4a5e; } /* ============================================================ * 5. CRUD (pages/css/justificaciones_crud.css) * ============================================================ */ :root[data-theme="dark"] .collapse-section { background: #1d2c3e; box-shadow: 0 1px 3px rgba(0,0,0,0.5); } :root[data-theme="dark"] #questionRef .prose th, :root[data-theme="dark"] #questionRef .prose td, :root[data-theme="dark"] #questionRef img, :root[data-theme="dark"] .ref-option-img { border-color: rgba(232,238,247,0.14); } /* Opciones de referencia (correcta/incorrecta) */ :root[data-theme="dark"] .ref-option-correct { background-color: #15432a; } :root[data-theme="dark"] .ref-option-wrong { background-color: #3a1714; } :root[data-theme="dark"] .ref-correct-highlight { background-color: #15432a; color: #e8eef7; } /* Las letras (.ref-option-letter con #22c55e/#ef4444 + texto blanco) se conservan */ /* Helpers de área "light" propios del CRUD (distintos de variables.css) */ :root[data-theme="dark"] .bg-mat-light { background-color: #14283c; } :root[data-theme="dark"] .bg-lc-light { background-color: #271b3d; } :root[data-theme="dark"] .bg-cn-light { background-color: #123524; } :root[data-theme="dark"] .bg-cc-light { background-color: #3a2c10; } :root[data-theme="dark"] .bg-ing-light { background-color: #3a1714; } /* ============================================================ * 6. Touch-ups de QA (texto-acento sobre oscuro + prose + cards reales) * ============================================================ */ /* Texto enriquecido (hardcodeado #374151) y títulos con acento oscuro */ :root[data-theme="dark"] .learning-prose { color: #e8eef7; } :root[data-theme="dark"] .learning-title, :root[data-theme="dark"] .learning-section-title { color: var(--area-primary); } /* Contenedores claros del render de justificación → superficie oscura */ :root[data-theme="dark"] .learning-card, :root[data-theme="dark"] .objective-card, :root[data-theme="dark"] .side-card { background: #1d2c3e; border-color: rgba(232,238,247,0.14); } :root[data-theme="dark"] .learning-card--soft, :root[data-theme="dark"] .side-card--media { background: linear-gradient(135deg, #1d2c3e, #172433); } :root[data-theme="dark"] .aside-icon { background: #243549; color: var(--area-primary); } :root[data-theme="dark"] .placeholder-box { border-color: rgba(232,238,247,0.22); color: #a6b4c8; } /* .learning-card--question (fondo acento + texto blanco) se conserva */ /* Acento-como-texto sobre fondo oscuro: usar el pastel claro (--area-primary) */ :root[data-theme="dark"] .site-title { color: var(--area-primary); } :root[data-theme="dark"] .breadcrumb a { color: var(--area-primary); } :root[data-theme="dark"] .qli-id, :root[data-theme="dark"] .qli-arrow { color: var(--area-primary); } :root[data-theme="dark"] .qli-text { color: #e8eef7; } /* ============================================================ * 7. Touch-ups QA #2: chips/botones de color + glosario/eyebrow + media + info-bubble * ============================================================ */ /* Tintes claros de color (chips/botones -100/-200) → superficie oscura del mismo tono. Los saturados -600/-700 (con texto blanco) se conservan. */ :root[data-theme="dark"] .bg-blue-100, :root[data-theme="dark"] .bg-blue-200 { background-color: #16334e !important; } :root[data-theme="dark"] .bg-green-100, :root[data-theme="dark"] .bg-green-200 { background-color: #15432a !important; } :root[data-theme="dark"] .bg-red-100 { background-color: #3a1714 !important; } :root[data-theme="dark"] .bg-indigo-100, :root[data-theme="dark"] .bg-indigo-200 { background-color: #1e2a52 !important; } :root[data-theme="dark"] .bg-yellow-50 { background-color: #3a2c10 !important; } /* Texto de color (etiquetas/iconos) → tinte claro legible sobre oscuro */ :root[data-theme="dark"] .text-red-600, :root[data-theme="dark"] .text-red-800 { color: #ffb4ab !important; } :root[data-theme="dark"] .text-green-600, :root[data-theme="dark"] .text-green-800 { color: #7fe0a4 !important; } :root[data-theme="dark"] .text-indigo-700 { color: #c3cdf5 !important; } /* Títulos "eyebrow" y términos del glosario (usaban --area-accent oscuro) */ :root[data-theme="dark"] .learning-eyebrow, :root[data-theme="dark"] .glossary-term { color: var(--area-primary); } /* Marco de media (fondo gris claro) */ :root[data-theme="dark"] .media-frame { background: #243549; } /* Cajas "Guía Teórica"/"Opciones Incorrectas" (.info-bubble: gradiente claro → oscuro) */ :root[data-theme="dark"] .info-bubble { background: linear-gradient(145deg, #1d2c3e 0%, #172433 100%); border-color: rgba(232,238,247,0.18); } :root[data-theme="dark"] .info-bubble__title, :root[data-theme="dark"] .info-bubble__preview { color: #e8eef7; } /* .info-bubble:hover (fondo acento + texto blanco) se conserva */ /* ============================================================ * 8. area.php: barra de filtros y paginación (fondos #fff → oscuro) * ============================================================ */ :root[data-theme="dark"] .filter-bar { background: linear-gradient(135deg, #172433 0%, #1d2c3e 100%); border-color: rgba(232,238,247,0.14); } :root[data-theme="dark"] .filter-bar__label { background-color: #1d2c3e; color: #e8eef7; border-color: rgba(232,238,247,0.14); } :root[data-theme="dark"] .filter-group { background-color: #1d2c3e; border-color: rgba(232,238,247,0.14); } :root[data-theme="dark"] .filter-group label { color: #a6b4c8; } /* background-color (no background) para no borrar la flecha del