/* ========================================================= EMI 1719 — TEMA HUD (opcional, activado por botón 🎨) ========================================================= TODO en este archivo vive dentro de "body.tema-hud" — si esa clase no está puesta en , este archivo no hace NADA. No reemplaza ni borra ningún estilo existente: solo redefine las variables de color (--cyan, --green, etc.) a una paleta más vibrante tipo HUD, y agrega brillos/pulsos puntuales sobre clases que ya existen en tu HTML real. ========================================================= */ body.tema-hud { /* Paleta principal — más saturada y brillante que la actual */ --cyan: #12d9ff; --cyan-dim: #0aa8c9; --green: #20e88a; --green-dim: #17b56c; --orange: #ffad45; --accent-orange: #ffad45; --red: #ff4f69; --accent-red: #ff4f69; --yellow: #ffe05b; --purple: #a96cff; --accent-blue: #12d9ff; /* Mismo cambio para la paleta local de la pestaña Multi-Motor (usa su propio juego de variables --ml-accent-*) */ --ml-accent-blue: #12d9ff; --ml-accent-green: #20e88a; --ml-accent-orange: #ffad45; --ml-accent-red: #ff4f69; --ml-accent-purple: #a96cff; --ml-accent-yellow: #ffe05b; /* Fondo con más presencia — grid tecnológico sutil + resplandores */ background-image: linear-gradient(rgba(18,217,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(18,217,255,.05) 1px, transparent 1px), radial-gradient(ellipse 1200px 600px at 15% -10%, rgba(18,217,255,.10), transparent 60%), radial-gradient(ellipse 900px 500px at 100% 110%, rgba(169,108,255,.08), transparent 60%); background-size: 42px 42px, 42px 42px, auto, auto; } /* --- Logo con más presencia --- */ body.tema-hud .logo { text-shadow: 0 0 18px rgba(18,217,255,.55); } /* --- Pestaña activa: brillo real, no solo color plano --- */ body.tema-hud .tab.active { box-shadow: inset 0 -3px 0 var(--cyan), 0 0 16px rgba(18,217,255,.25); } /* --- Badges (ej. "FUNCIONAL • NO SIMULADO") con pulso sutil --- */ body.tema-hud .badge { border-color: var(--green); box-shadow: 0 0 10px rgba(32,232,138,.35); animation: temaHudPulseGreen 2.4s ease-in-out infinite; } /* --- Botones principales con resplandor al pasar el mouse --- */ body.tema-hud .btn-primary:hover { box-shadow: 0 0 20px rgba(32,232,138,.5); } body.tema-hud .btn-cyan { box-shadow: 0 0 0 rgba(18,217,255,0); } body.tema-hud .btn-cyan:hover { box-shadow: 0 0 20px rgba(18,217,255,.4); } body.tema-hud .btn-purple:hover { box-shadow: 0 0 20px rgba(169,108,255,.4); } body.tema-hud .btn-danger:hover { box-shadow: 0 0 20px rgba(255,79,105,.4); } body.tema-hud .btn-orange:hover { box-shadow: 0 0 20px rgba(255,173,69,.4); } /* --- Foto de perfil / avatar con halo --- */ body.tema-hud #userPhotoBox { box-shadow: 0 0 16px rgba(32,232,138,.4); } /* --- Paneles principales con borde con más definición --- */ body.tema-hud .bracket-panel, body.tema-hud .auto-panel, body.tema-hud .ml-panel, body.tema-hud .cloud-projects-panel, body.tema-hud .ai-assistant-panel { box-shadow: 0 0 0 1px rgba(18,217,255,.12), 0 12px 34px rgba(0,0,0,.4); } /* --- Consola / salida de texto: acento cian más marcado --- */ body.tema-hud .console-header { color: var(--cyan); } /* --- Puntito de estado ("." usado como indicador vivo) --- */ body.tema-hud .punto { box-shadow: 0 0 8px currentColor; } /* --- Botón de "apariencia" en sí: se marca cuando está activo --- */ #temaHudBtn.tema-activa { color: var(--cyan, #12d9ff); border-color: var(--cyan, #12d9ff); } @keyframes temaHudPulseGreen { 0%, 100% { box-shadow: 0 0 8px rgba(32,232,138,.25); } 50% { box-shadow: 0 0 16px rgba(32,232,138,.55); } } /* Respeta a quien prefiere menos movimiento en pantalla */ @media (prefers-reduced-motion: reduce) { body.tema-hud .badge { animation: none; } }