body { background-color: #0b0f19; color: #e2e8f0; font-family: 'Inter', sans-serif; }
.glass-panel { background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0b0f19; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
.progress-bar { transition: width 1s ease-in-out; }

/* Tablas profesionales */
th { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; color: #94a3b8; }
td { font-size: 0.80rem; }

/* Animaciones */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
.slide-in-right { animation: slideInRight 0.4s ease-out forwards; }
.fade-out { animation: fadeOut 0.4s ease-out forwards; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeOut { to { opacity: 0; transform: translateX(100%); } }

/* Animación de Temblor para Error */
.shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }

/* Modal de Muerte */
.breach-overlay {
    background: radial-gradient(circle, rgba(220,38,38,0.2) 0%, rgba(11,15,25,0.95) 100%);
    backdrop-filter: blur(5px);
}

/* Efecto Glow LIVE */
.live-glow {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3), inset 0 0 10px rgba(251, 191, 36, 0.1);
    border-color: #3b82f6;
}

/* Select Personalizado */
select option {
    background-color: #111827;
    color: white;
    padding: 10px;
}

/* Responsive Sidebar Transitions */
.sidebar-transition { transition: transform 0.3s ease-in-out; }