/** * miclase-theme.css * Hoja de estilos centralizada para el sistema miClase.net (Core UI) * Tema Dark Premium (OLED, Glassmorphism, Glow & Studio Viewports) * * @author Carlos Velázquez * @version 1.0 * @since 2026 */ /* ========================================================================== 1. VARIABLES Y BASE GLOBALES (MULTI-THEME SUPPORT) ========================================================================== */ :root { /* Paleta Deep OLED & Glass (Default Dark) */ --color-bg-body: #050507; --color-card-bg: rgba(22, 22, 30, 0.65); --color-card-border: rgba(255, 255, 255, 0.07); --color-text-main: #f8f9fa; --color-text-muted: #8e8e9e; --color-black-title: rgba(10, 10, 14, 0.85); --color-theme-soft: rgba(0, 0, 0, 0.3); --color-theme-contrast: #000000; --color-theme-panel: rgba(20, 20, 25, 0.6); --btn-close-filter: invert(1) grayscale(100%) brightness(200%); /* FIX PRODUCCIÓN: Variables de estado y acento (requeridas para botones y validaciones) */ --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-primary-glow: rgba(59, 130, 246, 0.5); --color-primary-contrast: #ffffff; --color-success: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; } [data-theme="light"] { /* Paleta Light Premium (AdminLTE 4 Compatible) */ --color-bg-body: #f4f6f9; --color-card-bg: rgba(255, 255, 255, 0.85); --color-card-border: rgba(0, 0, 0, 0.12); --color-text-main: #212529; --color-text-muted: #6c757d; --color-black-title: rgba(255, 255, 255, 0.95); --color-theme-soft: rgba(0, 0, 0, 0.03); --color-theme-contrast: #ffffff; --color-theme-panel: rgba(255, 255, 255, 0.7); --btn-close-filter: none; /* Ajustes sutiles para fondos de evaluación en Light Mode para mantener el contraste */ --bg-soft-amarillo: rgba(254, 234, 137, 0.3); --bg-soft-azul: rgba(88, 175, 205, 0.2); /* FIX PRODUCCIÓN: Variables de estado y acento (Light Mode) */ --color-primary: #0d6efd; --color-primary-hover: #0b5ed7; --color-primary-glow: rgba(13, 110, 253, 0.4); --color-primary-contrast: #ffffff; --color-success: #198754; --color-warning: #ffc107; --color-danger: #dc3545; } /* Clases utilitarias semánticas (Reemplazan las clases hardcodeadas de Bootstrap) */ .text-theme-main { color: var(--color-text-main) !important; } .text-theme-muted { color: var(--color-text-muted) !important; } .bg-theme-soft { background-color: var(--color-theme-soft) !important; } .bg-theme-contrast { background-color: var(--color-theme-contrast) !important; } .bg-theme-panel { background-color: var(--color-theme-panel) !important; } .bg-black-title { background-color: var(--color-black-title) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } body { font-family: 'Source Sans 3', 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; background-color: var(--color-bg-body); color: var(--color-text-main); /* Fondo con halos sutiles de luz */ background-image: radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.03), transparent 25%), radial-gradient(circle at 85% 30%, rgba(16, 185, 129, 0.02), transparent 25%); background-attachment: fixed; } /* Espaciados y utilidades tipográficas */ .ls-1 { letter-spacing: 1px; } .ls-2 { letter-spacing: 2px; } /* ========================================================================== 2. TARJETAS, CONTENEDORES Y GLASSMORPHISM (Estandarización Premium) ========================================================================== */ .glass-panel { background: var(--color-card-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--color-card-border); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5); } .bg-dark-custom { background: var(--color-card-bg) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; } .border-custom-dark { border: 1px solid var(--color-card-border) !important; } .bg-black-title { background-color: var(--color-black-title) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .bg-black-text { background-color: var(--color-black-text) !important; } /* Cabeceras de Módulo Dinámicas (Respetando colores de Organización + Premium Glass) */ .bg-tema-dinamico { background: linear-gradient(135deg, var(--organizacionBackground-0, rgba(30, 30, 40, 0.85)) 0%, rgba(5, 5, 7, 0.95) 100%); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom: 1px solid var(--organizacionBackground-2, var(--color-card-border)) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); } /* ========================================================================== 3. BOTONES Y EFECTOS GLOW ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; vertical-align: middle; } .btn.w-100, .d-grid > .btn { display: flex; } .btn i, .btn svg, .btn span[class^="bi-"], .btn span[class^="fas-"] { display: inline-flex; align-items: center; justify-content: center; line-height: 0 !important; margin: 0; padding: 0; } .btn-primary { background-color: var(--color-primary); color: var(--color-primary-contrast); /* FIX PRODUCCIÓN: Asegurar contraste y visibilidad */ border: none; box-shadow: 0 0 15px var(--color-primary-glow); transition: all 0.3s ease; } .btn-primary:hover { background-color: var(--color-primary-hover); color: var(--color-primary-contrast); /* FIX PRODUCCIÓN */ box-shadow: 0 0 25px var(--color-primary-glow), 0 0 5px var(--color-primary); transform: translateY(-1px); } /* FIX PRODUCCIÓN: Integrar el filtro para los botones de cierre nativos (modales, offcanvas, etc.) */ .btn-close { filter: var(--btn-close-filter); } /* ========================================================================== 4. FORMULARIOS, INPUTS Y VALIDACIÓN UX ========================================================================== */ .input-wrapper { position: relative; } .input-with-icon-left { padding-left: 2.5rem !important; } .input-icon-left { position: absolute; top: 50% !important; left: 0.75rem; transform: translateY(-50%) !important; font-size: 1.1rem; color: var(--color-primary); pointer-events: none; z-index: 10; } /* ========================================================================== FIX GLOBAL: ESTANDARIZACIÓN ESTRUCTURAL DE ICONOS DERECHOS (OJO, LIMPIAR) ========================================================================== */ /* 1. Clases base dinámicas para el espacio (padding-right) basados en estructura HTML */ .form-control.has-clear-btn, .form-control.has-toggle-btn, .input-wrapper:has(> .btn-clear-input) > .form-control, .input-wrapper:has(> .toggle-password) > .form-control, .position-relative:has(> .btn-clear-input) > .form-control, .position-relative:has(> .toggle-password) > .form-control { padding-right: 2.5rem !important; } .form-control.has-clear-and-toggle, .input-wrapper:has(> .btn-clear-input):has(> .toggle-password) > .form-control, .position-relative:has(> .btn-clear-input):has(> .toggle-password) > .form-control { padding-right: 4.5rem !important; } /* 2. Posicionamiento base de los botones flotantes derechos */ .btn-clear-input, .toggle-password { position: absolute; top: 50% !important; /* Fuerza el centrado vertical en todos las resoluciones */ transform: translateY(-50%) !important; background: transparent !important; border: none !important; cursor: pointer; z-index: 10; padding: 0; margin: 0; line-height: 1; display: flex; align-items: center; justify-content: center; } .btn-clear-input { color: var(--color-text-muted); font-size: 1.15rem; display: none; /* JS controla su visibilidad real */ transition: color 0.2s ease, transform 0.2s ease; } .btn-clear-input:hover { color: var(--color-danger); transform: translateY(-50%) scale(1.15) !important; } .toggle-password { color: var(--color-primary); font-size: 1.1rem; transition: color 0.2s ease, filter 0.2s ease; } .toggle-password:hover { color: var(--color-primary-hover); filter: drop-shadow(0 0 5px var(--color-primary-glow)); } /* 3. Distribución inteligente cuando coexisten múltiples botones (Bloqueo de empalmes) */ .input-wrapper:has(> .btn-clear-input) > .btn-clear-input, .position-relative:has(> .btn-clear-input) > .btn-clear-input { right: 0.75rem; } .input-wrapper:has(> .toggle-password) > .toggle-password, .position-relative:has(> .toggle-password) > .toggle-password { right: 0.75rem; } /* Cuando coexisten ojo de contraseña y botón de limpiar */ .input-wrapper:has(> .btn-clear-input):has(> .toggle-password) > .toggle-password, .position-relative:has(> .btn-clear-input):has(> .toggle-password) > .toggle-password { right: 0.75rem !important; } .input-wrapper:has(> .btn-clear-input):has(> .toggle-password) > .btn-clear-input, .position-relative:has(> .btn-clear-input):has(> .toggle-password) > .btn-clear-input { right: 2.5rem !important; } /* 4. Convivencia con iconos nativos de validación de Bootstrap (is-valid / is-invalid) */ .input-wrapper:has(> .btn-clear-input) > .form-control.is-valid, .input-wrapper:has(> .btn-clear-input) > .form-control.is-invalid, .position-relative:has(> .btn-clear-input) > .form-control.is-valid, .position-relative:has(> .btn-clear-input) > .form-control.is-invalid, .input-wrapper:has(> .toggle-password) > .form-control.is-valid, .input-wrapper:has(> .toggle-password) > .form-control.is-invalid, .position-relative:has(> .toggle-password) > .form-control.is-valid, .position-relative:has(> .toggle-password) > .form-control.is-invalid { padding-right: 4.5rem !important; background-position: right 2.5rem center !important; } .input-wrapper:has(> .btn-clear-input):has(> .toggle-password) > .form-control.is-valid, .input-wrapper:has(> .btn-clear-input):has(> .toggle-password) > .form-control.is-invalid, .position-relative:has(> .btn-clear-input):has(> .toggle-password) > .form-control.is-valid, .position-relative:has(> .btn-clear-input):has(> .toggle-password) > .form-control.is-invalid { padding-right: 6.5rem !important; background-position: right 4.2rem center !important; } /* ========================================================================== */ /* Estados de Validación (Bootstrap overrides) */ .form-control.is-invalid, .form-select.is-invalid, select.is-invalid { border-color: var(--color-danger) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 0 0.25rem rgba(239, 68, 68, 0.25) !important; background-color: rgba(239, 68, 68, 0.05) !important; } .form-control.is-valid, .form-select.is-valid, select.is-valid { border-color: var(--color-success) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 0 0.25rem rgba(16, 185, 129, 0.25) !important; background-color: rgba(16, 185, 129, 0.05) !important; } /* Tooltips UX en Formularios */ .warning-tooltip { display: none; background-color: var(--color-warning); color: #ffffff; font-size: 0.8rem; margin-top: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 6px; font-weight: 600; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25); animation: fadeInDown 0.25s ease forwards; position: relative; z-index: 5; } .input-wrapper:focus-within .warning-tooltip { display: block; } .invalid-tooltip { display: none; background-color: var(--color-danger); color: #ffffff; font-size: 0.8rem; margin-top: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 6px; font-weight: 600; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); animation: fadeInDown 0.25s ease forwards; position: relative; z-index: 5; } .form-control.is-invalid ~ .invalid-tooltip, .form-select.is-invalid ~ .invalid-tooltip, select.is-invalid ~ .invalid-tooltip, .input-wrapper:has(.form-control.is-invalid) > .invalid-tooltip, .input-wrapper:has(.form-select.is-invalid) > .invalid-tooltip, .input-wrapper:has(select.is-invalid) > .invalid-tooltip { display: block !important; } .form-control.is-invalid ~ .warning-tooltip, .form-select.is-invalid ~ .warning-tooltip, select.is-invalid ~ .warning-tooltip, .input-wrapper:has(.form-control.is-invalid) .warning-tooltip, .input-wrapper:has(select.is-invalid) .warning-tooltip, .input-wrapper:has(.form-control.is-invalid):focus-within .warning-tooltip { display: none !important; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* Efecto focus en inputs (Microinteracciones) */ .input-wrapper:focus-within .input-icon-left, .input-wrapper:has(.select2-container--open) .input-icon-left, .input-wrapper:has(.select2-container--focus) .input-icon-left { color: var(--color-primary-hover); filter: drop-shadow(0 0 8px var(--color-primary-glow)); transform: translateY(-50%) scale(1.1) !important; transition: all 0.2s ease; } .input-wrapper input:focus, .input-wrapper select:focus { border-color: var(--color-primary) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 0 0.25rem var(--color-primary-glow) !important; } /* ========================================================================== 5. COMPONENTES EXTRA (DataTables, Viewport Profesional Imágenes) ========================================================================== */ .img-preview-wrapper { position: relative; border-radius: 12px; overflow: hidden; background-color: var(--color-canvas-bg); background-image: radial-gradient(circle at center, #2c2c3a 0%, #16161e 100%); border: 1px solid var(--color-card-border); box-shadow: inset 0 5px 20px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.02); display: flex; justify-content: center; align-items: center; min-height: 150px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .img-preview-wrapper:hover { border-color: var(--color-primary); box-shadow: inset 0 5px 20px rgba(0, 0, 0, 0.6), 0 0 15px var(--color-primary-glow); transform: translateY(-2px); } .img-preview-wrapper img { max-height: 120px; max-width: 85%; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.2)); z-index: 2; transition: transform 0.3s ease; } .img-preview-wrapper:hover img { transform: scale(1.05); } .img-preview-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(239, 68, 68, 0.65); z-index: 10; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; justify-content: center; align-items: center; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== 6. MÓDULO: PÁGINA DE LOGIN (Mejoras Dark Premium) ========================================================================== */ .login-wrapper { background-color: transparent; display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; } .login-ambient-glow { position: absolute; width: 50vw; height: 50vw; max-width: 800px; max-height: 800px; background: radial-gradient(circle, var(--color-primary-glow) 0%, transparent 60%); top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; opacity: 0.35; animation: pulseGlow 6s infinite alternate ease-in-out; } @keyframes pulseGlow { 0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.3; } 100% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.5; } } /* Animación exclusiva para badges en DataTables */ @keyframes pulseBadge { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); } 50% { transform: scale(1.08); box-shadow: 0 0 10px 4px rgba(239, 68, 68, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } .login-box-custom { background: rgba(15, 15, 20, 0.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 40px; border-radius: 12px; border: 1px solid var(--color-card-border); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255,255,255,0.02); max-width: 400px; width: 100%; z-index: 1; position: relative; } .login-logo { text-align: center; font-size: 2rem; margin-bottom: 10px; font-weight: 700; } .login-logo span { color: var(--color-primary); text-shadow: 0 0 10px var(--color-primary-glow); } .login-logo a { color: var(--color-text-main); text-decoration: none; } .login-subtitle { text-align: center; color: var(--color-text-muted); margin-bottom: 25px; } .hover-glow { transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.25s ease; } .hover-glow:hover { color: var(--color-primary-contrast); text-shadow: 0 0 6px var(--color-primary-glow), 0 0 12px var(--color-primary-glow); transform: translateY(-1px); } /* ========================================================================== 7. MÓDULO: MANEJADOR DE ERRORES ========================================================================== */ .error-component-wrapper { display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; width: 100%; } .error-card { background: var(--color-card-bg); backdrop-filter: blur(16px); border: 1px solid var(--color-card-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); max-width: 600px; width: 100%; overflow: hidden; position: relative; } .error-card .status-bar { height: 4px; width: 100%; display: block; } .error-empty-state { text-align: center; padding: 3rem 2rem; animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .error-empty-state-icon { font-size: 5rem; margin-bottom: 1rem; display: inline-block; opacity: 0.9; color: var(--color-text-main) !important; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease, opacity 0.3s ease, filter 0.3s ease; } .error-card:hover .error-empty-state-icon { transform: scale(1.1) rotate(-8deg); opacity: 1; color: var(--color-warning) !important; filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.4)); } .error-code { font-size: 0.85rem; letter-spacing: 3px; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 0.5rem; font-weight: 700; } .error-title { font-weight: 300; font-size: 2rem; color: var(--color-text-main); margin-bottom: 1rem; } .error-msg { color: var(--color-text-muted); font-size: 1.1rem; line-height: 1.6; margin-bottom: 2.5rem; } /* ========================================================================== 8. MÓDULO: VISOR DE MARKDOWN (ACTUALIZADO - ALTA LEGIBILIDAD & LATEX) ========================================================================== */ #md-viewer-app-scope { --md-accent: var(--color-primary); --md-bg-dark: rgba(22, 22, 30, 0.4); --md-card-bg: var(--color-card-bg); --md-border: var(--color-card-border); --md-scrollbar-thumb: rgba(255, 255, 255, 0.2); } #md-viewer-app-scope .markdown-body { background: transparent !important; font-family: 'Source Sans 3', 'Segoe UI', sans-serif !important; font-size: 1.25rem !important; /* Aumentado drásticamente */ line-height: 1.85 !important; color: #e2e8f0 !important; /* Color platinado de alto contraste */ } /* Equilibrio Tipográfico de Títulos */ #md-viewer-app-scope .markdown-body h1, #md-viewer-app-scope .markdown-body h2, #md-viewer-app-scope .markdown-body h3, #md-viewer-app-scope .markdown-body h4, #md-viewer-app-scope .markdown-body h5, #md-viewer-app-scope .markdown-body h6 { color: #ffffff !important; font-weight: 700 !important; margin-top: 1.8em !important; margin-bottom: 0.8em !important; line-height: 1.3 !important; } #md-viewer-app-scope .markdown-body h1 { font-size: 1.95rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; padding-bottom: 0.4em !important; } #md-viewer-app-scope .markdown-body h2 { font-size: 1.75rem !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding-bottom: 0.3em !important; } #md-viewer-app-scope .markdown-body h3 { font-size: 1.5rem !important; } #md-viewer-app-scope .markdown-body h4 { font-size: 1.35rem !important; } #md-viewer-app-scope .markdown-body p, #md-viewer-app-scope .markdown-body li { font-size: 1.25rem !important; margin-bottom: 1.25em !important; } /* Enlaces y Citas */ #md-viewer-app-scope .markdown-body a { color: #6ea8fe !important; text-decoration: none !important; border-bottom: 1px solid transparent !important; transition: all 0.2s ease-in-out !important; } #md-viewer-app-scope .markdown-body a:hover { color: #9ec5fe !important; border-bottom: 1px solid #9ec5fe !important; } #md-viewer-app-scope .markdown-body blockquote { font-size: 1.25rem !important; padding: 1.2rem 1.8rem !important; margin: 1.8em 0 !important; border-left: 4px solid #3b82f6 !important; background-color: rgba(59, 130, 246, 0.08) !important; color: #cbd5e1 !important; border-radius: 0 0.5rem 0.5rem 0 !important; font-style: italic !important; } /* Bloques de Código */ #md-viewer-app-scope .markdown-body code { font-family: 'Fira Code', 'Courier New', Courier, monospace !important; background-color: rgba(255, 255, 255, 0.08) !important; color: #f472b6 !important; padding: 0.25em 0.4em !important; border-radius: 0.375rem !important; font-size: 1rem !important; } #md-viewer-app-scope .markdown-body pre { background-color: #0b0c10 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 0.5rem !important; padding: 1.5rem !important; overflow-x: auto !important; margin: 1.8em 0 !important; box-shadow: inset 0 2px 6px rgba(0,0,0,0.5) !important; } #md-viewer-app-scope .markdown-body pre code { background-color: transparent !important; color: #e2e8f0 !important; padding: 0 !important; font-size: 1.1rem !important; } /* Tablas */ #md-viewer-app-scope .markdown-body table { width: 100% !important; margin-bottom: 2.2em !important; border-collapse: collapse !important; margin: 0 !important; font-size: 1.15rem !important; } #md-viewer-app-scope .markdown-body table th { background-color: rgba(59, 130, 246, 0.2) !important; color: white !important; position: sticky !important; top: 0 !important; z-index: 10 !important; padding: 12px 18px !important; white-space: nowrap !important; backdrop-filter: blur(5px) !important; } #md-viewer-app-scope .markdown-body table td { border-bottom: 1px solid var(--md-border) !important; padding: 12px 18px !important; } /* --- IMÁGENES (RESTAURADO A ORIGINAL Y BLINDADO) --- */ #md-viewer-app-scope .markdown-body img { max-width: 100% !important; height: auto !important; display: block !important; margin: 20px auto !important; border-radius: 6px !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; object-fit: contain !important; } /* Integración LaTeX y Matemáticas */ #md-viewer-app-scope .markdown-body .MathJax_Display, #md-viewer-app-scope .markdown-body .katex-display { overflow-x: auto !important; overflow-y: hidden !important; padding: 1.2em 0 !important; margin: 1.8em 0 !important; color: #ffffff !important; font-size: 1.3rem !important; } #md-viewer-app-scope .markdown-body .MathJax, #md-viewer-app-scope .markdown-body .katex { color: #ffffff !important; font-size: 1.25rem !important; } #md-viewer-app-scope .markdown-body merror { background: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; border: 1px solid #ef4444 !important; padding: 4px 8px !important; border-radius: 4px !important; font-size: 1.1rem !important; } /* Elementos Extra de UI */ #md-viewer-app-scope .empty-state { text-align: center; padding: 4rem 1.5rem; animation: fadeIn 0.5s ease-in-out; } #md-viewer-app-scope .empty-state-icon { font-size: 5rem; color: rgba(255, 255, 255, 0.3); margin-bottom: 1.5rem; display: block; transition: transform 0.3s ease, color 0.3s ease, filter 0.3s ease; } #md-viewer-app-scope .empty-state:hover .empty-state-icon { transform: scale(1.05); color: var(--md-accent); filter: drop-shadow(0 0 15px var(--color-primary-glow)); } #md-viewer-app-scope ::-webkit-scrollbar { width: 10px; height: 10px; } #md-viewer-app-scope ::-webkit-scrollbar-track { background: var(--md-card-bg); border-radius: 4px; } #md-viewer-app-scope ::-webkit-scrollbar-thumb { background: var(--md-scrollbar-thumb); border-radius: 4px; } #md-viewer-app-scope ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); } #md-viewer-app-scope .video-container, #md-viewer-app-scope video.local-video { display: block; margin: 2rem auto; width: 60%; max-width: 100%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); background: #000; } @media (max-width: 992px) { #md-viewer-app-scope .video-container, #md-viewer-app-scope video.local-video { width: 100% !important; margin: 1.5rem 0; } } #md-viewer-app-scope .video-responsive-inner { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 8px; } #md-viewer-app-scope .video-responsive-inner iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } #md-viewer-app-scope .mermaid-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; margin: 2.5rem 0; overflow-x: auto; } #md-viewer-app-scope .mermaid { width: auto; max-width: 100%; } @media (min-width: 993px) { #md-viewer-app-scope .mermaid.is-gantt { width: 80% !important; max-width: 80%; } } @media (max-width: 992px) { #md-viewer-app-scope .mermaid.is-gantt { width: 100% !important; } } #md-viewer-app-scope .mermaid svg { width: 100% !important; height: auto !important; display: block; margin: 0 auto; } #md-viewer-app-scope .table-responsive-wrapper { display: block; margin: 2rem auto; width: fit-content; max-width: 100%; overflow: auto; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.4); background-color: var(--md-bg-dark); border: 1px solid var(--md-border); backdrop-filter: blur(10px); max-height: 75vh; } #md-viewer-app-scope .task-list-item { display: flex; align-items: flex-start; padding: 6px 10px; gap: 15px; } #md-viewer-app-scope .task-checkbox { appearance: none; width: 1.3em; height: 1.3em; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 4px; position: relative; transition: all 0.2s; } #md-viewer-app-scope .task-checkbox:checked { background-color: var(--md-accent); border-color: var(--md-accent); box-shadow: 0 0 10px var(--color-primary-glow); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"); background-size: 80%; background-position: center; background-repeat: no-repeat; } #md-viewer-app-scope .math-plot-container { background: rgba(15, 15, 20, 0.8); backdrop-filter: blur(10px); border: 1px solid var(--md-border); border-radius: 8px; margin: 2rem auto; padding: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); width: 100%; display: flex; justify-content: center; } #md-viewer-app-scope .function-plot text { fill: #ffffff !important; font-size: 14px !important; font-weight: 600; } #md-viewer-app-scope .function-plot .axis path, #md-viewer-app-scope .function-plot .axis line { stroke: #ffffff !important; stroke-width: 2px !important; } #md-viewer-app-scope .function-plot .grid .tick line { stroke: rgba(255, 255, 255, 0.2) !important; stroke-dasharray: 2, 2; } #md-viewer-app-scope .function-plot path.line { stroke-width: 4px !important; filter: drop-shadow(0 0 6px var(--color-primary-glow)); } #md-viewer-app-scope .function-plot .tip { background: rgba(0, 0, 0, 0.9) !important; color: var(--color-success) !important; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; padding: 8px 12px; font-family: monospace; z-index: 100; } /* ========================================================================== 9. MÓDULO: MENÚ LATERAL Y GLOW EFFECTS ========================================================================== */ .app-sidebar .nav-link { display: flex !important; align-items: center !important; justify-content: flex-start !important; overflow: visible !important; min-height: 2.5rem !important; } .app-sidebar .nav-link p { display: flex !important; align-items: center !important; justify-content: space-between !important; flex: 1 1 auto !important; width: 100% !important; margin: 0 !important; padding-left: 0.5rem !important; padding-right: 0.25rem !important; overflow: visible !important; line-height: 1 !important; box-sizing: border-box !important; } /* FIX DEFENSIVO ABSOLUTO PARA CHEVRONS EN MENÚ LATERAL (PREVIENE DESFASE POR MATHJAX/MARKDOWN) */ .app-sidebar .nav-link .nav-arrow, .app-sidebar .nav-link p .nav-arrow, .app-sidebar .nav-link i.nav-arrow, .app-sidebar .nav-link .bi-chevron-right, .app-sidebar .nav-link .bi-chevron-down { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; /* Blindaje de eje cruzado flexbox frente a resets tipográficos globales */ margin: 0 0 0 auto !important; padding: 0 !important; width: 1.25rem !important; height: 1.25rem !important; min-width: 1.25rem !important; min-height: 1.25rem !important; flex-shrink: 0 !important; font-size: 0.85rem !important; line-height: 1 !important; vertical-align: middle !important; box-sizing: border-box !important; float: none !important; color: var(--color-text-muted) !important; /* FORZAR TRANSFORM EN ESTADO BASE/NO SELECCIONADO PARA REPLICAR CÁLCULO DE LAYOUT DE MENU-OPEN */ transform: rotate(0deg) !important; transform-origin: center center !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease !important; } /* Aislamiento estricto de pseudoelementos y vectores internos contra CSS resets */ .app-sidebar .nav-link .nav-arrow::before, .app-sidebar .nav-link p .nav-arrow::before, .app-sidebar .nav-link .nav-arrow i, .app-sidebar .nav-link .nav-arrow svg { display: inline-block !important; position: static !important; top: auto !important; line-height: 1 !important; vertical-align: 0 !important; margin: 0 !important; padding: 0 !important; float: none !important; font-size: inherit !important; } /* Estado desplegado del menú (Acordeón abierto / Seleccionado) */ .app-sidebar .nav-item.menu-open > .nav-link .nav-arrow, .app-sidebar .nav-item.menu-open > .nav-link p .nav-arrow { transform: rotate(90deg) !important; color: var(--color-primary) !important; } .app-sidebar .nav-item.menu-open > .nav-link, .app-sidebar .nav-item > .nav-link.active { background: var(--color-card-bg-hover) !important; color: var(--color-text-main) !important; border-radius: 0.375rem !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); transition: background-color 0.2s ease, color 0.2s ease !important; } .app-sidebar .nav-item.menu-open > .nav-link > .nav-icon, .app-sidebar .nav-item > .nav-link.active > .nav-icon { color: var(--color-primary) !important; filter: drop-shadow(0 0 8px var(--color-primary-glow)) !important; } /* FIX: ALINEACIÓN DINÁMICA DE SUBMENÚS Y RESPETO A SIDEBAR COLLAPSE */ body:not(.sidebar-collapse) .app-sidebar .nav-treeview > .nav-item > .nav-link, body.sidebar-collapse .app-sidebar:hover .nav-treeview > .nav-item > .nav-link { padding-left: 2.2rem !important; transition: padding-left 0.3s ease; } body.sidebar-collapse .app-sidebar:not(:hover) .nav-treeview > .nav-item > .nav-link { padding-left: 1rem !important; justify-content: center !important; transition: padding-left 0.3s ease; } body.sidebar-collapse .app-sidebar:not(:hover) .nav-treeview > .nav-item > .nav-link p { display: none !important; } /* ========================================================================== 10. MODIFICACIONES EXCLUSIVAS PARA EL LOGIN (access.php) ========================================================================== */ .login-wrapper .input-wrapper, .login-wrapper .input-group, .login-wrapper .position-relative { position: relative !important; } .login-wrapper .input-icon-left, .login-wrapper .btn-clear-input, .login-wrapper .toggle-password { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 10 !important; } .login-wrapper .input-icon-left { left: 0.75rem !important; color: var(--color-primary) !important; filter: drop-shadow(0 0 4px var(--color-primary-glow)) !important; } .login-wrapper .toggle-password { color: var(--color-primary) !important; filter: drop-shadow(0 0 4px var(--color-primary-glow)) !important; } .login-wrapper .form-control.is-valid, .login-wrapper .form-control.is-invalid { background-image: none !important; } .login-wrapper .warning-tooltip, .login-wrapper .invalid-tooltip { position: absolute !important; top: 100%; left: 0; right: 0; margin-top: 4px; z-index: 20; } /* ========================================================================== 11. FIX GLOBAL: SCROLL-LOCK BOOTSTRAP 5 vs ADMINLTE 4 ========================================================================== */ body.modal-open { padding-right: 0 !important; overflow: visible !important; } .modal-open .app-wrapper, .modal-open .app-header, .modal-open .app-footer, .modal-open .app-main, .modal-open .fixed-top, .modal-open .fixed-bottom { padding-right: 0 !important; margin-right: 0 !important; } /* ========================================================================== 12. FIX GLOBAL: MENÚS DESPLEGABLES EN DATATABLES ========================================================================== */ .table-responsive .dropdown-menu { z-index: 1055 !important; margin-top: 5px !important; } /* ========================================================================== 13. FIX GLOBAL: OCULTAR BREADCRUMBS EN MÓVILES ========================================================================== */ @media (max-width: 767.98px) { .app-main .breadcrumb, .app-content-header .breadcrumb { display: none !important; } } /* ========================================================================== 14. TIMELINE DE HISTORIAL VIRTUALIZADO ========================================================================== */ .timeline-table.dataTable { border-collapse: collapse !important; border: none !important; margin-top: 1rem !important; } .timeline-table.dataTable tbody tr { background-color: transparent !important; } .timeline-table.dataTable tbody td { border: none !important; padding: 0 0 1rem 0 !important; background: transparent !important; } .timeline-table.dataTable.no-footer { border-bottom: none !important; } .timeline-item-wrapper { position: relative; padding-left: 10px; } .dataTables_filter label { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-muted); } /* ========================================================================== 15. MÁQUINA DE ESTADOS DEL CROPPER/CÁMARA (Bloqueo Físico de Visibilidad) ========================================================================== */ .cropper-state-machine .img-action-buttons { display: none !important; /* Oculto por defecto a nivel estructural */ } /* 1. Estado Vacío (Sin foto, sin cámara) */ .cropper-state-machine[data-state="empty"] .initial-actions { display: flex !important; } .cropper-state-machine[data-state="empty"] .img-action-buttons { display: none !important; } /* 2. Estado Cámara (Cámara encendida, esperando captura) */ .cropper-state-machine[data-state="camera"] .initial-actions { display: none !important; } .cropper-state-machine[data-state="camera"] .img-action-buttons { display: flex !important; } .cropper-state-machine[data-state="camera"] .btn-take-photo { display: inline-flex !important; } .cropper-state-machine[data-state="camera"] .btn-trigger-crop { display: none !important; } /* 3. Estado Cargado (Foto subida o capturada) */ .cropper-state-machine[data-state="loaded"] .initial-actions { display: none !important; } .cropper-state-machine[data-state="loaded"] .img-action-buttons { display: flex !important; } .cropper-state-machine[data-state="loaded"] .btn-take-photo { display: none !important; } .cropper-state-machine[data-state="loaded"] .btn-trigger-crop { display: inline-flex !important; } /* ========================================================================== 16. DRAG AND DROP ZONE (MÓDULO UPLOADS) ========================================================================== */ .drop-zone { transition: all 0.3s ease; position: relative; } .drop-zone.dragover { background-color: rgba(59, 130, 246, 0.15) !important; border-color: var(--color-primary) !important; border-style: dashed !important; border-width: 2px !important; box-shadow: inset 0 0 15px var(--color-primary-glow); } /* ========================================================================== 17. PALETA DE COLORES EXTENDIDA (Gamificación, Explicaciones y Módulos) ========================================================================== */ :root { /* Variables globales de color base */ --color-amarillo: #FEEA89; --color-naranja: #FBC58B; --color-azul: #58AFCD; --color-verde: #B4D68A; --color-cian: #00E5FF; --color-salmon: #FF6B6B; --color-mostaza: #FFD166; --color-lila: #A29BFE; --color-menta: #2ED573; --color-indigo: #9D5CFF; --color-purpura: #AC75FF; --color-rosa: #FF66B2; --color-teal: #3FE3B2; --color-gris: #B0B8C1; /* Alpha / Borders Derivados (Opacidad 90%) */ --border-amarillo: rgba(254, 234, 137, 0.9); --border-naranja: rgba(251, 197, 139, 0.9); --border-azul: rgba(88, 175, 205, 0.9); --border-verde: rgba(180, 214, 138, 0.9); --border-cian: rgba(0, 229, 255, 0.9); --border-salmon: rgba(255, 107, 107, 0.9); --border-mostaza: rgba(255, 209, 102, 0.9); --border-lila: rgba(162, 155, 254, 0.9); --border-menta: rgba(46, 213, 115, 0.9); --border-indigo: rgba(157, 92, 255, 0.9); --border-purpura: rgba(172, 117, 255, 0.9); --border-rosa: rgba(255, 102, 178, 0.9); --border-teal: rgba(63, 227, 178, 0.9); --border-gris: rgba(176, 184, 193, 0.9); /* Alpha / Fondos Soft (Opacidad 15%) */ --bg-soft-amarillo: rgba(254, 234, 137, 0.15); --bg-soft-naranja: rgba(251, 197, 139, 0.15); --bg-soft-azul: rgba(88, 175, 205, 0.15); --bg-soft-verde: rgba(180, 214, 138, 0.15); --bg-soft-cian: rgba(0, 229, 255, 0.15); --bg-soft-salmon: rgba(255, 107, 107, 0.15); --bg-soft-mostaza: rgba(255, 209, 102, 0.15); --bg-soft-lila: rgba(162, 155, 254, 0.15); --bg-soft-menta: rgba(46, 213, 115, 0.15); --bg-soft-indigo: rgba(102, 16, 242, 0.15); --bg-soft-purpura: rgba(111, 66, 193, 0.15); --bg-soft-rosa: rgba(214, 51, 132, 0.15); --bg-soft-teal: rgba(32, 201, 151, 0.15); --bg-soft-gris: rgba(108, 117, 125, 0.15); } /* -------------------------------------------------------------------------- 1. Tipografía e Iconos (.text-[color]) -------------------------------------------------------------------------- */ .text-amarillo { color: var(--color-amarillo) !important; } .text-naranja { color: var(--color-naranja) !important; } .text-azul { color: var(--color-azul) !important; } .text-verde { color: var(--color-verde) !important; } .text-cian { color: var(--color-cian) !important; } .text-salmon { color: var(--color-salmon) !important; } .text-mostaza { color: var(--color-mostaza) !important; } .text-lila { color: var(--color-lila) !important; } .text-menta { color: var(--color-menta) !important; } .text-indigo { color: var(--color-indigo) !important; } .text-purpura { color: var(--color-purpura) !important; } .text-rosa { color: var(--color-rosa) !important; } .text-teal { color: var(--color-teal) !important; } .text-gris { color: var(--color-gris) !important; } /* -------------------------------------------------------------------------- 2. Fondos Sólidos (.bg-[color]) y Soft (.bg-[color]-soft) -------------------------------------------------------------------------- */ /* Fondos Sólidos (Estándar Nativo Bootstrap) */ .bg-amarillo { background-color: var(--color-amarillo) !important; color: #16161e !important; } .bg-naranja { background-color: var(--color-naranja) !important; color: #16161e !important; } .bg-azul { background-color: var(--color-azul) !important; color: #ffffff !important; } .bg-verde { background-color: var(--color-verde) !important; color: #16161e !important; } .bg-cian { background-color: var(--color-cian) !important; color: #16161e !important; } .bg-salmon { background-color: var(--color-salmon) !important; color: #ffffff !important; } .bg-mostaza { background-color: var(--color-mostaza) !important; color: #16161e !important; } .bg-lila { background-color: var(--color-lila) !important; color: #ffffff !important; } .bg-menta { background-color: var(--color-menta) !important; color: #16161e !important; } .bg-indigo { background-color: var(--color-indigo) !important; color: #ffffff !important; } .bg-purpura { background-color: var(--color-purpura) !important; color: #ffffff !important; } .bg-rosa { background-color: var(--color-rosa) !important; color: #ffffff !important; } .bg-teal { background-color: var(--color-teal) !important; color: #ffffff !important; } .bg-gris { background-color: var(--color-gris) !important; color: #ffffff !important; } /* Fondos Traslúcidos (Glassmorphism Soft) */ .bg-amarillo-soft { background-color: var(--bg-soft-amarillo) !important; } .bg-naranja-soft { background-color: var(--bg-soft-naranja) !important; } .bg-azul-soft { background-color: var(--bg-soft-azul) !important; } .bg-verde-soft { background-color: var(--bg-soft-verde) !important; } .bg-cian-soft { background-color: var(--bg-soft-cian) !important; } .bg-salmon-soft { background-color: var(--bg-soft-salmon) !important; } .bg-mostaza-soft { background-color: var(--bg-soft-mostaza) !important; } .bg-lila-soft { background-color: var(--bg-soft-lila) !important; } .bg-menta-soft { background-color: var(--bg-soft-menta) !important; } .bg-indigo-soft { background-color: var(--bg-soft-indigo) !important; } .bg-purpura-soft { background-color: var(--bg-soft-purpura) !important; } .bg-rosa-soft { background-color: var(--bg-soft-rosa) !important; } .bg-teal-soft { background-color: var(--bg-soft-teal) !important; } .bg-gris-soft { background-color: var(--bg-soft-gris) !important; } /* -------------------------------------------------------------------------- 3. Utilidades de Borde Completo e Individuales (.border-[color]) -------------------------------------------------------------------------- */ /* Bordes completos */ .border-amarillo, .border-amarrillo { --bs-border-color: var(--border-amarillo) !important; border-color: var(--border-amarillo) !important; } .border-naranja { --bs-border-color: var(--border-naranja) !important; border-color: var(--border-naranja) !important; } .border-azul { --bs-border-color: var(--border-azul) !important; border-color: var(--border-azul) !important; } .border-verde { --bs-border-color: var(--border-verde) !important; border-color: var(--border-verde) !important; } .border-cian { --bs-border-color: var(--border-cian) !important; border-color: var(--border-cian) !important; } .border-salmon { --bs-border-color: var(--border-salmon) !important; border-color: var(--border-salmon) !important; } .border-mostaza { --bs-border-color: var(--border-mostaza) !important; border-color: var(--border-mostaza) !important; } .border-lila { --bs-border-color: var(--border-lila) !important; border-color: var(--border-lila) !important; } .border-menta { --bs-border-color: var(--border-menta) !important; border-color: var(--border-menta) !important; } .border-indigo { --bs-border-color: var(--border-indigo) !important; border-color: var(--border-indigo) !important; } .border-purpura { --bs-border-color: var(--border-purpura) !important; border-color: var(--border-purpura) !important; } .border-rosa { --bs-border-color: var(--border-rosa) !important; border-color: var(--border-rosa) !important; } .border-teal { --bs-border-color: var(--border-teal) !important; border-color: var(--border-teal) !important; } .border-gris { --bs-border-color: var(--border-gris) !important; border-color: var(--border-gris) !important; } /* Bordes por lado específicos */ .border-top-amarillo, .border-top-amarrillo { border-top-color: var(--border-amarillo) !important; } .border-end-amarillo, .border-end-amarrillo { border-right-color: var(--border-amarillo) !important; } .border-bottom-amarillo, .border-bottom-amarrillo { border-bottom-color: var(--border-amarillo) !important; } .border-start-amarillo, .border-start-amarrillo { border-left-color: var(--border-amarillo) !important; } .border-top-naranja { border-top-color: var(--border-naranja) !important; } .border-end-naranja { border-right-color: var(--border-naranja) !important; } .border-bottom-naranja { border-bottom-color: var(--border-naranja) !important; } .border-start-naranja { border-left-color: var(--border-naranja) !important; } .border-top-azul { border-top-color: var(--border-azul) !important; } .border-end-azul { border-right-color: var(--border-azul) !important; } .border-bottom-azul { border-bottom-color: var(--border-azul) !important; } .border-start-azul { border-left-color: var(--border-azul) !important; } .border-top-verde { border-top-color: var(--border-verde) !important; } .border-end-verde { border-right-color: var(--border-verde) !important; } .border-bottom-verde { border-bottom-color: var(--border-verde) !important; } .border-start-verde { border-left-color: var(--border-verde) !important; } .border-top-cian { border-top-color: var(--border-cian) !important; } .border-end-cian { border-right-color: var(--border-cian) !important; } .border-bottom-cian { border-bottom-color: var(--border-cian) !important; } .border-start-cian { border-left-color: var(--border-cian) !important; } .border-top-salmon { border-top-color: var(--border-salmon) !important; } .border-end-salmon { border-right-color: var(--border-salmon) !important; } .border-bottom-salmon { border-bottom-color: var(--border-salmon) !important; } .border-start-salmon { border-left-color: var(--border-salmon) !important; } .border-top-mostaza { border-top-color: var(--border-mostaza) !important; } .border-end-mostaza { border-right-color: var(--border-mostaza) !important; } .border-bottom-mostaza { border-bottom-color: var(--border-mostaza) !important; } .border-start-mostaza { border-left-color: var(--border-mostaza) !important; } .border-top-lila { border-top-color: var(--border-lila) !important; } .border-end-lila { border-right-color: var(--border-lila) !important; } .border-bottom-lila { border-bottom-color: var(--border-lila) !important; } .border-start-lila { border-left-color: var(--border-lila) !important; } .border-top-menta { border-top-color: var(--border-menta) !important; } .border-end-menta { border-right-color: var(--border-menta) !important; } .border-bottom-menta { border-bottom-color: var(--border-menta) !important; } .border-start-menta { border-left-color: var(--border-menta) !important; } .border-top-indigo { border-top-color: var(--border-indigo) !important; } .border-end-indigo { border-right-color: var(--border-indigo) !important; } .border-bottom-indigo { border-bottom-color: var(--border-indigo) !important; } .border-start-indigo { border-left-color: var(--border-indigo) !important; } .border-top-purpura { border-top-color: var(--border-purpura) !important; } .border-end-purpura { border-right-color: var(--border-purpura) !important; } .border-bottom-purpura { border-bottom-color: var(--border-purpura) !important; } .border-start-purpura { border-left-color: var(--border-purpura) !important; } .border-top-rosa { border-top-color: var(--border-rosa) !important; } .border-end-rosa { border-right-color: var(--border-rosa) !important; } .border-bottom-rosa { border-bottom-color: var(--border-rosa) !important; } .border-start-rosa { border-left-color: var(--border-rosa) !important; } .border-top-teal { border-top-color: var(--border-teal) !important; } .border-end-teal { border-right-color: var(--border-teal) !important; } .border-bottom-teal { border-bottom-color: var(--border-teal) !important; } .border-start-teal { border-left-color: var(--border-teal) !important; } .border-top-gris { border-top-color: var(--border-gris) !important; } .border-end-gris { border-right-color: var(--border-gris) !important; } .border-bottom-gris { border-bottom-color: var(--border-gris) !important; } .border-start-gris { border-left-color: var(--border-gris) !important; } /* -------------------------------------------------------------------------- 4. Modificadores Específicos para .bg-dark y .bg-dark-custom con Borde -------------------------------------------------------------------------- */ .bg-dark.border-amarillo, .bg-dark-custom.border-amarillo, .bg-dark.border-amarrillo, .bg-dark-custom.border-amarrillo { --bs-border-color: var(--border-amarillo) !important; border-color: var(--border-amarillo) !important; } .bg-dark.border-naranja, .bg-dark-custom.border-naranja { --bs-border-color: var(--border-naranja) !important; border-color: var(--border-naranja) !important; } .bg-dark.border-azul, .bg-dark-custom.border-azul { --bs-border-color: var(--border-azul) !important; border-color: var(--border-azul) !important; } .bg-dark.border-verde, .bg-dark-custom.border-verde { --bs-border-color: var(--border-verde) !important; border-color: var(--border-verde) !important; } .bg-dark.border-cian, .bg-dark-custom.border-cian { --bs-border-color: var(--border-cian) !important; border-color: var(--border-cian) !important; } .bg-dark.border-salmon, .bg-dark-custom.border-salmon { --bs-border-color: var(--border-salmon) !important; border-color: var(--border-salmon) !important; } .bg-dark.border-mostaza, .bg-dark-custom.border-mostaza { --bs-border-color: var(--border-mostaza) !important; border-color: var(--border-mostaza) !important; } .bg-dark.border-lila, .bg-dark-custom.border-lila { --bs-border-color: var(--border-lila) !important; border-color: var(--border-lila) !important; } .bg-dark.border-menta, .bg-dark-custom.border-menta { --bs-border-color: var(--border-menta) !important; border-color: var(--border-menta) !important; } .bg-dark.border-indigo, .bg-dark-custom.border-indigo { --bs-border-color: var(--border-indigo) !important; border-color: var(--border-indigo) !important; } .bg-dark.border-purpura, .bg-dark-custom.border-purpura { --bs-border-color: var(--border-purpura) !important; border-color: var(--border-purpura) !important; } .bg-dark.border-rosa, .bg-dark-custom.border-rosa { --bs-border-color: var(--border-rosa) !important; border-color: var(--border-rosa) !important; } .bg-dark.border-teal, .bg-dark-custom.border-teal { --bs-border-color: var(--border-teal) !important; border-color: var(--border-teal) !important; } .bg-dark.border-gris, .bg-dark-custom.border-gris { --bs-border-color: var(--border-gris) !important; border-color: var(--border-gris) !important; } /* -------------------------------------------------------------------------- 5. Clases de Badge Personalizadas y Combinación Nativa -------------------------------------------------------------------------- */ .badge-ext { background-color: var(--color-card-bg-hover); border: 1px solid var(--color-card-border); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-weight: 600; } /* Badges unificados con fondo suave */ .badge-amarillo, .badge-amarrillo { color: var(--color-amarillo) !important; background-color: var(--bg-soft-amarillo) !important; border: 1px solid var(--border-amarillo) !important; } .badge-naranja { color: var(--color-naranja) !important; background-color: var(--bg-soft-naranja) !important; border: 1px solid var(--border-naranja) !important; } .badge-azul { color: var(--color-azul) !important; background-color: var(--bg-soft-azul) !important; border: 1px solid var(--border-azul) !important; } .badge-verde { color: var(--color-verde) !important; background-color: var(--bg-soft-verde) !important; border: 1px solid var(--border-verde) !important; } .badge-cian { color: var(--color-cian) !important; background-color: var(--bg-soft-cian) !important; border: 1px solid var(--border-cian) !important; } .badge-salmon { color: var(--color-salmon) !important; background-color: var(--bg-soft-salmon) !important; border: 1px solid var(--border-salmon) !important; } .badge-mostaza { color: var(--color-mostaza) !important; background-color: var(--bg-soft-mostaza) !important; border: 1px solid var(--border-mostaza) !important; } .badge-lila { color: var(--color-lila) !important; background-color: var(--bg-soft-lila) !important; border: 1px solid var(--border-lila) !important; } .badge-menta { color: var(--color-menta) !important; background-color: var(--bg-soft-menta) !important; border: 1px solid var(--border-menta) !important; } .badge-indigo { color: var(--color-indigo) !important; background-color: var(--bg-soft-indigo) !important; border: 1px solid var(--border-indigo) !important; } .badge-purpura { color: var(--color-purpura) !important; background-color: var(--bg-soft-purpura) !important; border: 1px solid var(--border-purpura) !important; } .badge-rosa { color: var(--color-rosa) !important; background-color: var(--bg-soft-rosa) !important; border: 1px solid var(--border-rosa) !important; } .badge-teal { color: var(--color-teal) !important; background-color: var(--bg-soft-teal) !important; border: 1px solid var(--border-teal) !important; } .badge-gris { color: var(--color-gris) !important; background-color: var(--bg-soft-gris) !important; border: 1px solid var(--border-gris) !important; } /* Overrides para Badges nativos () */ .badge.border-amarillo, .badge.border-amarrillo { --bs-border-color: var(--border-amarillo) !important; border-color: var(--border-amarillo) !important; } .badge.border-naranja { --bs-border-color: var(--border-naranja) !important; border-color: var(--border-naranja) !important; } .badge.border-azul { --bs-border-color: var(--border-azul) !important; border-color: var(--border-azul) !important; } .badge.border-verde { --bs-border-color: var(--border-verde) !important; border-color: var(--border-verde) !important; } .badge.border-cian { --bs-border-color: var(--border-cian) !important; border-color: var(--border-cian) !important; } .badge.border-salmon { --bs-border-color: var(--border-salmon) !important; border-color: var(--border-salmon) !important; } .badge.border-mostaza { --bs-border-color: var(--border-mostaza) !important; border-color: var(--border-mostaza) !important; } .badge.border-lila { --bs-border-color: var(--border-lila) !important; border-color: var(--border-lila) !important; } .badge.border-menta { --bs-border-color: var(--border-menta) !important; border-color: var(--border-menta) !important; } .badge.border-indigo { --bs-border-color: var(--border-indigo) !important; border-color: var(--border-indigo) !important; } .badge.border-purpura { --bs-border-color: var(--border-purpura) !important; border-color: var(--border-purpura) !important; } .badge.border-rosa { --bs-border-color: var(--border-rosa) !important; border-color: var(--border-rosa) !important; } .badge.border-teal { --bs-border-color: var(--border-teal) !important; border-color: var(--border-teal) !important; } .badge.border-gris { --bs-border-color: var(--border-gris) !important; border-color: var(--border-gris) !important; } /* -------------------------------------------------------------------------- 6. Cajas Renderizadoras de Matemáticas (Math Preview Boxes) -------------------------------------------------------------------------- */ .math-preview-box-ext { background: #000000; border: 1px solid var(--color-card-border); border-radius: 8px; padding: 1rem; min-height: 80px; color: var(--color-text-main); } .math-preview-box-amarillo, .math-preview-box-amarrillo { border: 1px solid var(--border-amarillo) !important; } .math-preview-box-naranja { border: 1px solid var(--border-naranja) !important; } .math-preview-box-azul { border: 1px solid var(--border-azul) !important; } .math-preview-box-verde { border: 1px solid var(--border-verde) !important; } .math-preview-box-cian { border: 1px solid var(--border-cian) !important; } .math-preview-box-salmon { border: 1px solid var(--border-salmon) !important; } .math-preview-box-mostaza { border: 1px solid var(--border-mostaza) !important; } .math-preview-box-lila { border: 1px solid var(--border-lila) !important; } .math-preview-box-menta { border: 1px solid var(--border-menta) !important; } .math-preview-box-indigo { border: 1px solid var(--border-indigo) !important; } .math-preview-box-purpura { border: 1px solid var(--border-purpura) !important; } .math-preview-box-rosa { border: 1px solid var(--border-rosa) !important; } .math-preview-box-teal { border: 1px solid var(--border-teal) !important; } .math-preview-box-gris { border: 1px solid var(--border-gris) !important; } /* ========================================================================== 18. FIX GLOBAL: SWEETALERT2 DARK PREMIUM & GLOW ICONS ========================================================================== */ /* Desenfoque forzado para el fondo de las alertas */ .swal2-popup.bg-dark-custom { backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; } /* Fix Inputs dentro de SweetAlert para coincidir con la UI y validación estricta */ .swal2-input, .swal2-file, .swal2-textarea, .swal2-select, .swal2-radio, .swal2-checkbox { border-color: var(--color-card-border) !important; color: var(--color-text-main) !important; background-color: rgba(15, 15, 20, 0.8) !important; } .swal2-input:focus, .swal2-file:focus, .swal2-textarea:focus, .swal2-select:focus { border-color: var(--color-primary) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 0 0.25rem var(--color-primary-glow) !important; } /* Fix Icono: Success */ .swal2-icon.swal2-success { border-color: var(--color-success) !important; color: var(--color-success) !important; box-shadow: 0 0 15px rgba(16, 185, 129, 0.2) !important; } .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--color-success) !important; } .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(16, 185, 129, 0.3) !important; } /* Fix Icono: Warning */ .swal2-icon.swal2-warning { border-color: var(--color-warning) !important; color: var(--color-warning) !important; box-shadow: 0 0 15px rgba(245, 158, 11, 0.2) !important; } /* Fix Icono: Error */ .swal2-icon.swal2-error { border-color: var(--color-danger) !important; color: var(--color-danger) !important; box-shadow: 0 0 15px rgba(239, 68, 68, 0.2) !important; } .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--color-danger) !important; } /* Fix Icono: Info / Question */ .swal2-icon.swal2-info, .swal2-icon.swal2-question { border-color: var(--color-primary) !important; color: var(--color-primary) !important; box-shadow: 0 0 15px var(--color-primary-glow) !important; } /* Barra de progreso de los Toasts */ .swal2-timer-progress-bar-custom { background: var(--color-primary) !important; box-shadow: 0 0 10px var(--color-primary-glow) !important; } /* ========================================================================== 19. ESTANDARIZACIÓN VISUAL SELECT2 (HEREDA DE SELECTS NATIVOS) HOMOLOGACIÓN: Select2 usa los mismos colores que select.form-select nativo ========================================================================== */ /* 1. Contenedor principal y campo base - Hereda de .form-select nativo */ .select2-container--default .select2-selection--single { background-color: var(--bs-body-bg, #212529) !important; border: 1px solid var(--bs-border-color, #495057) !important; border-radius: 0.375rem !important; min-height: calc(1.5em + 0.75rem + 2px) !important; color: #ffffff !important; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important; padding: 0.375rem 2.25rem 0.375rem 0.75rem !important; display: flex !important; align-items: center !important; /* Misma flecha SVG que usa select.form-select nativo */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238e8e9e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: right 0.75rem center !important; background-size: 16px 12px !important; } /* 2. Ajuste cuando hay ícono a la izquierda (mismo que select nativo) */ select.input-with-icon-left + .select2-container--default .select2-selection--single, .input-wrapper:has(.input-icon-left) .select2-container--default .select2-selection--single { padding-left: 2.5rem !important; } /* 3. Texto renderizado dentro del Select2 */ .select2-container--default .select2-selection--single .select2-selection__rendered { color: #ffffff !important; font-weight: 500 !important; line-height: 1.5 !important; padding-left: 0 !important; padding-right: 0 !important; width: 100%; /* FIX: Truncado elegante de textos largos para evitar sobreposición */ display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* 4. Ocultamos la flecha nativa de Select2 (usamos la nuestra) */ .select2-container--default .select2-selection--single .select2-selection__arrow { display: none !important; } /* 5. Estado Hover y Focus (mismo efecto que select nativo) */ .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--open .select2-selection--single { border-color: var(--color-primary) !important; background-color: var(--bs-body-bg, #212529) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 0 0.25rem var(--color-primary-glow, rgba(59, 130, 246, 0.25)) !important; outline: 0 !important; } /* 6. Menú desplegable (Dropdown) - Mismo fondo oscuro consistente */ .select2-dropdown { background-color: var(--bs-body-bg, #212529) !important; border: 1px solid var(--bs-border-color, #495057) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6) !important; border-radius: 0.375rem !important; overflow: hidden; z-index: 1060 !important; } /* 7. Caja de búsqueda superior en el dropdown */ .select2-search--dropdown { padding: 0.5rem !important; background-color: var(--bs-body-bg, #212529) !important; border-bottom: 1px solid var(--bs-border-color, #495057) !important; } .select2-search--dropdown .select2-search__field { background-color: rgba(0, 0, 0, 0.2) !important; border: 1px solid var(--bs-border-color, #495057) !important; color: var(--color-text-main) !important; border-radius: 0.25rem !important; padding: 0.375rem 0.75rem !important; } .select2-search--dropdown .select2-search__field:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 0.2rem var(--color-primary-glow) !important; outline: 0 !important; } /* 8. Opciones del dropdown - Mismos colores que