/**
 * Estilos para notificaciones en tiempo real
 */

/* Contenedor de toasts */
#toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    width: 350px;
    max-width: calc(100vw - 40px);
}

/* Toast individual */
.toast-notification {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 10px;
    overflow: hidden;
    animation: slideInRight 0.3s ease-out;
    position: relative;
}

.toast-notification::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

/* Colores según tipo */
.toast-notification.bg-primary::before { background: #0d6efd; }
.toast-notification.bg-success::before { background: #198754; }
.toast-notification.bg-danger::before { background: #dc3545; }
.toast-notification.bg-warning::before { background: #ffc107; }
.toast-notification.bg-info::before { background: #0dcaf0; }
.toast-notification.bg-secondary::before { background: #6c757d; }
.toast-notification.bg-dark::before { background: #212529; }

/* Hover */
.toast-notification:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transform: translateX(-5px);
    transition: all 0.2s;
}

/* Animación de entrada */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Badge de notificaciones */
#notification-badge {
    font-size: 0.65rem;
    padding: 0.25em 0.5em;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.9; }
}

/* Animación cuando se actualiza el badge */
.animate-bounce {
    animation: bounce-once 0.5s cubic-bezier(0.36, 0, 0.66, -0.56) !important;
}

@keyframes bounce-once {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(0.9); }
    75% { transform: scale(1.2); }
}

/* Dropdown de notificaciones */
#notificaciones-dropdown {
    max-height: 500px;
    overflow-y: auto;
}

#notificaciones-dropdown .notif-item {
    transition: background-color 0.2s;
}

#notificaciones-dropdown .notif-item:hover {
    background-color: #f8f9fa;
}

#notificaciones-dropdown .notif-item .badge {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.9);
    }
}

/* Indicador de conexión */
#connection-status {
    cursor: pointer;
}

#connection-status.online i {
    color: #28a745;
    animation: pulse-dot 2s infinite;
}

#connection-status.offline i {
    color: #dc3545;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Responsivo */
@media (max-width: 576px) {
    #toast-container {
        width: calc(100vw - 20px);
        right: 10px;
        top: 70px;
    }
    
    .toast-notification {
        font-size: 0.9rem;
    }
}

/* Scrollbar personalizado para dropdown */
#notificaciones-dropdown::-webkit-scrollbar {
    width: 6px;
}

#notificaciones-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#notificaciones-dropdown::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

#notificaciones-dropdown::-webkit-scrollbar-thumb:hover {
    background: #555;
}